import { useState } from 'react';
import AppBar from '@material-ui/core/AppBar';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import { Box, Button } from '@material-ui/core';
import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
import AnvilDrawer from './AnvilDrawer';
const useStyles = makeStyles((theme) =>
createStyles({
appBar: {
paddingTop: theme.spacing(0.5),
paddingBottom: theme.spacing(0.5),
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3),
},
input: {
height: '2.8em',
width: '30vw',
backgroundColor: theme.palette.secondary.main,
borderRadius: '3px',
},
barElement: {
padding: 0,
},
icons: {
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
searchBar: {
[theme.breakpoints.down('sm')]: {
flexGrow: 1,
paddingLeft: '15vw',
},
},
}),
);
const Header = (): JSX.Element => {
const classes = useStyles();
const [open, setOpen] = useState(false);
const toggleDrawer = (): void => setOpen(!open);
return (
<>
{ICONS.map(
(icon): JSX.Element => (
),
)}
>
);
};
export default Header;