import {FC} from 'react' import styled from 'styled-components' const Base = styled('div')({ height: '3rem', borderRadius: '0.25rem', overflow: 'hidden', position: 'relative', backgroundColor: 'var(--color-bg, white)', '::before': { content: "''", borderWidth: 1, borderStyle: 'solid', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', borderRadius: 'inherit', boxSizing: 'border-box', opacity: 0.5, }, }) const ClickArea = styled('label')({ position: 'relative', height: '100%', }) const Label = styled('span')({ position: 'absolute', left: -999999, }) const Input = styled('input')({ display: 'block', width: '100%', height: '100%', margin: 0, padding: '0 1rem', boxSizing: 'border-box', font: 'inherit', border: 0, backgroundColor: 'transparent', color: 'inherit', outline: 0, }) type Props = { label: string, name: string, className?: string, block?: boolean, placeholder?: string, defaultValue?: string | number | readonly string[], type?: 'email' | 'url' | 'text' | 'tel', } const TextInput: FC = ({ label, className, block, ...etcProps }) => { return ( ) } export default TextInput