import React from "react" ; import styled from "styled-components" ; import media from "src/utils/media" ; interface InputProps { placeholder ? : string ; type ? : "button" | "checkbox" | "file" | "hidden" | "image" | "password" | "radio" | "reset" | "submit" | "text" | "search" | "email" | "url" | "tel" | "date" | "time" | "number" | "range" | "color" | "datetime-local" | "month" | "week" | "datetime" ; onChange ? : ( newVal : string ) => void ; value ? : string ; } const Input = styled . input `
  width: 380px;
  height: 100%;
  padding: 0 0 0 20px;

  font-family: Raleway;
  font-size: 16px;
  line-height: 100%;

  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  border: none;

  &:focus {
    outline: none;
  }

  ${ media . phone `
    width: 60vw;
    padding-left: 15px;
  ` }
` ; const TextInput = ( { placeholder , type = "text" , onChange = ( ) => { } , value } ) => ( < Input placeholder = { placeholder } type = { type } value = { value } onChange = { e => onChange ( e . target . value ) } />); export default TextInput ;