Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 7x 2x 7x 7x | import styled from '@emotion/styled';
interface ButtonProps {
className?: string;
children: React.ReactNode;
type?: 'submit' | 'button' | 'reset';
onClick?: () => unknown;
isAccomplished?: boolean;
style?: React.CSSProperties;
isDisabled?: boolean;
}
export function Button({
className,
children,
type = 'submit',
onClick,
isAccomplished,
style,
isDisabled
}: ButtonProps) {
return (
<ButtonContainer
className={className}
style={style}
type={type}
onClick={onClick}
isAccomplished={isAccomplished}
disabled={isDisabled}
>
{children}
</ButtonContainer>
);
}
const ButtonContainer = styled.button<ButtonProps>`
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
height: 50px;
padding: 0 16px;
border: none;
border-radius: 25px;
background-color: ${({ isAccomplished }) =>
isAccomplished ? 'var(--button-accomplished-color)' : 'var(--button-color)'};
color: ${({ isAccomplished }) =>
isAccomplished ? 'var(--button-accomplished-text-color)' : 'var(--button-text-color)'};
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
text-align: center;
box-sizing: border-box;
cursor: pointer;
&:not(:last-of-type) {
margin-bottom: 8px;
}
`;
|