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;