Local modifications to ClusterLabs/Anvil by Alteeve
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

49 lines
1.3 KiB

import { Drawer, List, ListItem } from '@material-ui/core';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import { Dispatch, SetStateAction } from 'react';
import { BodyText } from './Text';
import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
interface DrawerProps {
open: boolean;
setOpen: Dispatch<SetStateAction<boolean>>;
}
const useStyles = makeStyles(() =>
createStyles({
list: {
width: '15vw',
backdropFilter: 'blur(10px)',
opacity: 0.7,
},
}),
);
const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
const classes = useStyles();
return (
<Drawer anchor="left" open={open} onClose={() => setOpen(!open)}>
<div role="presentation">
<List className={classes.list}>
{ICONS.map(
(icon): JSX.Element => (
<ListItem button key={icon.image}>
<img
alt=""
key="icon"
src={icon.image} // eslint-disable-next-line react/jsx-props-no-spreading
{...ICON_SIZE}
/>
<BodyText text={icon.text} />
</ListItem>
),
)}
</List>
</div>
</Drawer>
);
};
export default AnvilDrawer;