이승윤

feat: Common component 추가- DropDownList

1 +import React from 'react';
2 +import styled from 'styled-components';
3 +import { dropdownListColorMap } from '../../lib/styles/palette';
4 +
5 +const DropDownListBlock = styled.div`
6 + float: ${props => props.float || ''};
7 + width: ${props => props.size || '40%'};
8 +`;
9 +
10 +const DropDownList = styled.ul`
11 + padding: 0;
12 + margin: 0;
13 + background-color: ${props => dropdownListColorMap[props.color].background};
14 + border: 2px solid ${props => dropdownListColorMap[props.color].borderColor};
15 + box-sizing: border-box;
16 + color: ${props => dropdownListColorMap[props.color].color};
17 + font-size: 1.3rem;
18 + font-weight: 500;
19 + &:first-child {
20 + padding-top: 0.5em;
21 + }
22 +`;
23 +
24 +const ListItem = styled.li`
25 + list-style: none;
26 + padding-left: 1em;
27 + padding-bottom: 0.3em;
28 + border-bottom: 2px solid #e5e5e5;
29 +`;
30 +
31 +const DropDown = ({ children, color, float, size }) => {
32 + return (
33 + <DropDownListBlock color={color} float={float} size={size}>
34 + <DropDownList color={color}>
35 + <ListItem>{children}</ListItem>
36 + </DropDownList>
37 + </DropDownListBlock>
38 + );
39 +};
40 +
41 +export default DropDown;