import React, { useState } from 'react' import { Icon, IconButton } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' import clsx from 'clsx' const useStyles = makeStyles(({ palette, ...theme }) => ({ root: { backgroundColor: palette.primary.main, color: palette.primary.contrastText, '&::placeholder': { color: palette.primary.contrastText, }, }, searchBoxHolder: { position: 'absolute', width: '100%', top: 0, left: 0, zIndex: 9, height: 'var(--topbar-height)', }, searchBox: { outline: 'none', border: 'none', fontSize: '1rem', height: 'calc(100% - 5px)', }, })) const MatxSearchBox = () => { const [open, setOpen] = useState(false) const classes = useStyles() const toggle = () => { setOpen(!open) } return ( <React.Fragment> {!open && ( <IconButton onClick={toggle}> <Icon>search</Icon> </IconButton> )} {open && ( <div className={clsx( 'flex items-center', classes.root, classes.searchBoxHolder )} > <input className={clsx( 'px-4 search-box w-full', classes.root, classes.searchBox )} type="text" placeholder="Search here..." autoFocus /> <IconButton onClick={toggle} className="align-middle mx-4"> <Icon>close</Icon> </IconButton> </div> )} </React.Fragment> ) } export default MatxSearchBox