이승윤

feat: Common component 추가- SearchBox

1 +import React from 'react';
2 +import styled from 'styled-components';
3 +import { inputColorMap } from '../../lib/styles/palette';
4 +
5 +const InputBlock = styled.div`
6 + input {
7 + padding: 20px;
8 + padding-right: 200px;
9 + color: ${props => inputColorMap[props.color].color};
10 + box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
11 + border: 3px solid ${props => inputColorMap[props.color].borderColor};
12 +
13 + font-size: ${props => props.size};
14 +
15 + &::placeholder {
16 + color: ${props => inputColorMap[props.color].placeholder};
17 + text-transform: uppercase;
18 + }
19 + }
20 + float: ${props => props.float || ''};
21 +`;
22 +
23 +const Input = ({ children, color, size, float }) => {
24 + return (
25 + <InputBlock color={color} size={size} float={float}>
26 + <input placeholder={children} color={color} />
27 + </InputBlock>
28 + );
29 +};
30 +
31 +export default Input;