frontend/components/Toasts/index.tsx (view raw)
1import {useTheme} from '@mui/material/styles';
2import Snackbar from '@mui/material/Snackbar';
3import useToastStore from '../../stores/useToastStore';
4
5const Toasts = () => {
6 const theme = useTheme();
7 const toast = useToastStore(s => s.toast);
8 const action = useToastStore(s => s.action);
9 const clearToast = useToastStore(s => s.clearToast);
10
11 return (
12 <Snackbar
13 sx={{bottom: theme.spacing(8)}}
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
27export default Toasts;