diff --git a/src/components/Form/Button.tsx b/src/components/Form/Button.tsx index c3c7da1..96e2acc 100644 --- a/src/components/Form/Button.tsx +++ b/src/components/Form/Button.tsx @@ -1,7 +1,9 @@ -import styled from 'styled-components'; +import styled, { keyframes } from 'styled-components'; import colors from 'styles/colors'; import { InputSize, applySize } from 'styles/dimensions'; +type LoadState = 'loading' | 'success' | 'error'; + interface ButtonProps { children: React.ReactNode; onClick?: React.MouseEventHandler; @@ -10,6 +12,7 @@ interface ButtonProps { fgColor?: string, styles?: string, title?: string, + loadState?: LoadState, }; const StyledButton = styled.button` @@ -19,6 +22,9 @@ const StyledButton = styled.button` font-family: PTMono; box-sizing: border-box; width: -moz-available; + display: flex; + justify-content: center; + gap: 1rem; box-shadow: 3px 3px 0px ${colors.fgShadowColor}; &:hover { box-shadow: 5px 5px 0px ${colors.fgShadowColor}; @@ -36,8 +42,29 @@ const StyledButton = styled.button` ${props => props.styles} `; + +const spinAnimation = keyframes` + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +`; +const SimpleLoader = styled.div` + border: 4px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top: 4px solid ${colors.background}; + width: 1rem; + height: 1rem; + animation: ${spinAnimation} 1s linear infinite; +`; + +const Loader = (props: { loadState: LoadState }) => { + if (props.loadState === 'loading') return + if (props.loadState === 'success') return + if (props.loadState === 'error') return + return ; +}; + const Button = (props: ButtonProps): JSX.Element => { - const { children, size, bgColor, fgColor, onClick, styles, title } = props; + const { children, size, bgColor, fgColor, onClick, styles, title, loadState } = props; return ( null) } @@ -47,6 +74,7 @@ const Button = (props: ButtonProps): JSX.Element => { styles={styles} title={title?.toString()} > + { loadState && } {children} );