Showing
1 changed file
with
18 additions
and
2 deletions
| 1 | import React from 'react'; | 1 | import React from 'react'; |
| 2 | +import styled from 'styled-components'; | ||
| 3 | +import { buttonColorMap } from '../../lib/styles/palette'; | ||
| 2 | 4 | ||
| 3 | -const Button = () => { | 5 | +const ButtonBlock = styled.button` |
| 4 | - return <div>Button</div>; | 6 | + width: 20%; |
| 7 | + background-color: ${props => buttonColorMap[props.color].background}; | ||
| 8 | + &:hover { | ||
| 9 | + background-color: ${props => buttonColorMap[props.color].hoverBackground}; | ||
| 10 | + } | ||
| 11 | + color: ${props => buttonColorMap[props.color].color}; | ||
| 12 | + float: ${props => props.float || ''}; | ||
| 13 | +`; | ||
| 14 | + | ||
| 15 | +const Button = ({ children, color, float }) => { | ||
| 16 | + return ( | ||
| 17 | + <ButtonBlock color={color} float={float}> | ||
| 18 | + {children} | ||
| 19 | + </ButtonBlock> | ||
| 20 | + ); | ||
| 5 | }; | 21 | }; |
| 6 | 22 | ||
| 7 | export default Button; | 23 | export default Button; | ... | ... |
-
Please register or login to post a comment