이승윤

feat: Common component 추가- DropDownButton

1 +import React from 'react';
2 +import styled from 'styled-components';
3 +import { dropdownHeaderColorMap } from '../../lib/styles/palette';
4 +
5 +const DropDownBlock = styled.div`
6 + margin: 0 auto;
7 + float: ${props => props.float || ''};
8 +`;
9 +
10 +const DropDownHeader = styled.button`
11 + margin-bottom: 0.8em;
12 + padding: 0.4em;
13 + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
14 + font-weight: 500;
15 + font-size: ${props => props.size};
16 + border: 2px solid ${props => dropdownHeaderColorMap[props.color].borderColor};
17 + color: ${props => dropdownHeaderColorMap[props.color].color};
18 + background-color: ${props => dropdownHeaderColorMap[props.color].background};
19 + &:hover {
20 + background-color: ${props =>
21 + dropdownHeaderColorMap[props.color].hoverBackground};
22 + }
23 +`;
24 +
25 +const DropDown = ({ children, float, color, size }) => {
26 + return (
27 + <DropDownBlock float={float} color={color} size={size}>
28 + <DropDownHeader color={color} size={size}>
29 + {children}
30 + </DropDownHeader>
31 + </DropDownBlock>
32 + );
33 +};
34 +
35 +export default DropDown;