blob: 65cf838b0c3f32332928a9b4f040a60e73f4ea97 (
plain) (
tree)
|
|
import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
export interface InputProps {
className?: string;
value?: string;
width?: string;
fontSize?: string;
fontColor?: ColorOption;
placeholder?: string;
}
export const Input =
styled.input <
InputProps >
`
font-size: ${props => props.fontSize};
width: ${props => props.width};
padding: 0.1em 0em;
font-family: 'Inter UI';
color: ${props => props.theme[props.fontColor || 'white']};
background: transparent;
outline: none;
border: none;
&::placeholder {
color: ${props => props.theme[props.fontColor || 'white']};
opacity: 0.5;
}
`;
Input.defaultProps = {
width: 'auto',
fontColor: ColorOption.white,
fontSize: '12px',
};
Input.displayName = 'Input';
|