Showing
1 changed file
with
35 additions
and
0 deletions
| 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; |
-
Please register or login to post a comment