frontend/components/Toasts/index.tsx (view raw)
1import {makeStyles} from '@material-ui/core/styles';
2import Snackbar from '@material-ui/core/Snackbar';
3import useToastStore from '../../stores/useToastStore';
4
5const Toasts = () => {
6 const toast = useToastStore(s => s.toast);
7 const clearToast = useToastStore(s => s.clearToast);
8 const classes = useStyles();
9
10 return (
11 <Snackbar
12 className={classes.withMobile}
13 anchorOrigin={{
14 vertical: 'bottom',
15 horizontal: 'left',
16 }}
17 autoHideDuration={6000}
18 open={!!toast}
19 message={toast}
20 onClose={clearToast}
21 />
22 );
23};
24
25const useStyles = makeStyles(theme => ({
26 withMobile: {
27 [theme.breakpoints.down('sm')]: {
28 bottom: theme.spacing(8),
29 },
30 }
31}));
32
33export default Toasts;