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;