Skip to content

Commit

Permalink
design :: button component
Browse files Browse the repository at this point in the history
  • Loading branch information
dutexion committed Mar 12, 2024
1 parent 18512a0 commit d7bf8ef
Showing 1 changed file with 63 additions and 0 deletions.
63 changes: 63 additions & 0 deletions src/components/common/button/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';

type ButtonStyleType = 'solid' | 'ghost';
type ButtonColorType = 'black' | 'white';

type ButtonPropsType = {
buttonStyle: ButtonStyleType;
buttonColor: ButtonColorType;
width: number;
height: number;
children: ReactNode;
isBold?: boolean;
font?: number;
onClick: () => void;
};

export const Button = ({
buttonStyle,
buttonColor,
width,
height,
children,
onClick,
font = 16,
isBold = false,
}: ButtonPropsType) => {
return (
<Wrapper
width={width}
height={height}
buttonStyle={buttonStyle}
buttonColor={buttonColor}
onClick={onClick}
font={font}
isBold={isBold}
>
{children}
</Wrapper>
);
};

const Wrapper = styled.div<Omit<ButtonPropsType, 'children, onClick'>>`
cursor: pointer;
width: ${({ width }) => width + 'px'};
height: ${({ height }) => height + 'px'};
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
transition: 0.2s linear;
font-size: ${({ font }) => font + 'px'};
font-weight: ${({ isBold }) => (isBold ? 700 : 500)};
color: ${({ buttonColor, buttonStyle }) =>
buttonStyle === 'ghost' ? buttonColor : buttonColor === 'black' ? 'white' : 'black'};
border: 1px ${({ buttonColor }) => buttonColor} solid;
background-color: ${({ buttonColor, buttonStyle }) => (buttonStyle === 'ghost' ? 'rgba(0,0,0,0)' : buttonColor)};
&:hover {
color: ${({ buttonColor, buttonStyle }) =>
buttonStyle === 'ghost' ? (buttonColor === 'black' ? 'white' : 'black') : buttonColor};
background-color: ${({ buttonColor, buttonStyle }) => (buttonStyle === 'ghost' ? buttonColor : 'rgba(0,0,0,0)')};
}
`;

0 comments on commit d7bf8ef

Please sign in to comment.