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 action = useToastStore(s => s.action);
8 const clearToast = useToastStore(s => s.clearToast);
9 const classes = useStyles();
10
11 return (
12 <Snackbar
13 className={classes.withMobile}
14 anchorOrigin={{
15 vertical: 'bottom',
16 horizontal: 'left',
17 }}
18 autoHideDuration={6000}
19 open={!!toast}
20 message={toast}
21 onClose={clearToast}
22 action={action}
23 />
24 );
25};
26
27const useStyles = makeStyles(theme => ({
28 withMobile: {
29 [theme.breakpoints.down('sm')]: {
30 bottom: theme.spacing(8),
31 },
32 }
33}));
34
35export default Toasts;