import React , { FC } from 'react' ; import * as Styled from './SearchBar.styles' ; import { FiSearch } from 'react-icons/fi' ; export interface Props { name : string ; type : string ; placeholder : string ; value : string ; setValue : React . Dispatch < React . SetStateAction < string > > ; required ? : boolean ; } function param { string } name param { string } type param { string } placeholder param { string } value param { function } setValue param { boolean } required returns { JSX . Element } const SearchBar = ( { name , type , placeholder , value , setValue } ) => { return ( < Styled . Container > < Styled . Input type = { type } name = { name } value = { value } onChange = { ( e ) => setValue ( e . target . value ) } required / > < Styled . Label htmlFor = { name } > < FiSearch className = { 'search-icon' } /> { placeholder } < /Styled.Label> < /Styled.Container>); } ; export default SearchBar ;