initialised commit on the ui converted in mui to astryx and changed the design to doormile

src/components/@extended/Snackbar.js

@@ -1,127 +1,55 @@
-// material-ui
-import { Alert, Button, Fade, Grow, Slide } from '@mui/material';
-import MuiSnackbar from '@mui/material/Snackbar';
+import { Toast } from '@astryxdesign/core/Toast';
+import { Button } from '@astryxdesign/core/Button';
 
 // project-import
-import IconButton from './IconButton';
 import { dispatch, useSelector } from 'store';
 import { closeSnackbar } from 'store/reducers/snackbar';
 
-// assets
-import { CloseOutlined } from '@ant-design/icons';
-
-// animation function
-function TransitionSlideLeft(props) {
-  return <Slide {...props} direction="left" />;
-}
-
-function TransitionSlideUp(props) {
-  return <Slide {...props} direction="up" />;
-}
-
-function TransitionSlideRight(props) {
-  return <Slide {...props} direction="right" />;
-}
-
-function TransitionSlideDown(props) {
-  return <Slide {...props} direction="down" />;
-}
-
-function GrowTransition(props) {
-  return <Grow {...props} />;
-}
-
-// animation options
-const animation = {
-  SlideLeft: TransitionSlideLeft,
-  SlideUp: TransitionSlideUp,
-  SlideRight: TransitionSlideRight,
-  SlideDown: TransitionSlideDown,
-  Grow: GrowTransition,
-  Fade
-};
-
 // ==============================|| SNACKBAR ||============================== //
+// Redux-driven single-toast surface (separate from the notistack-based `enqueueSnackbar`
+// calls used elsewhere in the app). Rebuilt on Astryx's `Toast` primitive — `variant`
+// picks default vs. alert-style presentation, `alert.color` maps onto Toast's narrower
+// info/error `type`, and `anchorOrigin` positions the fixed wrapper the same way the MUI
+// Snackbar's anchorOrigin used to.
 
 const Snackbar = () => {
   const snackbar = useSelector((state) => state.snackbar);
-  const { actionButton, anchorOrigin, alert, close, message, open, transition, variant } = snackbar;
+  const { actionButton, anchorOrigin, alert, message, open, variant } = snackbar;
 
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-    dispatch(closeSnackbar());
-  };
+  const handleClose = () => dispatch(closeSnackbar());
+
+  if (!open) return null;
+
+  const isError = variant === 'alert' && alert?.color === 'error';
+  const showUndo = variant === 'default' ? true : actionButton !== false;
+
+  const vertical = anchorOrigin?.vertical === 'top' ? 'top' : 'bottom';
+  const horizontal = anchorOrigin?.horizontal === 'left' ? 'left' : anchorOrigin?.horizontal === 'center' ? 'center' : 'right';
 
   return (
-    <>
-      {/* default snackbar */}
-      {variant === 'default' && (
-        <MuiSnackbar
-          anchorOrigin={anchorOrigin}
-          open={open}
-          autoHideDuration={6000}
-          onClose={handleClose}
-          message={message}
-          TransitionComponent={animation[transition]}
-          action={
-            <>
-              <Button color="secondary" size="small" onClick={handleClose}>
-                UNDO
-              </Button>
-              <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose} sx={{ mt: 0.25 }}>
-                <CloseOutlined />
-              </IconButton>
-            </>
-          }
-        />
-      )}
-
-      {/* alert snackbar */}
-      {variant === 'alert' && (
-        <MuiSnackbar
-          TransitionComponent={animation[transition]}
-          anchorOrigin={anchorOrigin}
-          open={open}
-          autoHideDuration={6000}
-          onClose={handleClose}
-        >
-          <Alert
-            variant={alert.variant}
-            color={alert.color}
-            action={
-              <>
-                {actionButton !== false && (
-                  <Button color={alert.color} size="small" onClick={handleClose}>
-                    UNDO
-                  </Button>
-                )}
-                {close !== false && (
-                  <IconButton
-                    sx={{ mt: 0.25 }}
-                    size="small"
-                    aria-label="close"
-                    variant="contained"
-                    color={alert.color}
-                    onClick={handleClose}
-                  >
-                    <CloseOutlined />
-                  </IconButton>
-                )}
-              </>
-            }
-            sx={{
-              ...(alert.variant === 'outlined' && {
-                bgcolor: 'grey.0'
-              })
-            }}
-          >
-            {message}
-          </Alert>
-        </MuiSnackbar>
-      )}
-    </>
+    <div
+      style={{
+        position: 'fixed',
+        [vertical]: 24,
+        ...(horizontal === 'center' ? { left: '50%', transform: 'translateX(-50%)' } : { [horizontal]: 24 }),
+        zIndex: 1500
+      }}
+    >
+      <Toast
+        type={isError ? 'error' : 'info'}
+        body={message}
+        isAutoHide
+        autoHideDuration={6000}
+        endContent={
+          showUndo ? (
+            <Button label="Undo" size="sm" variant="ghost" onClick={handleClose}>
+              UNDO
+            </Button>
+          ) : undefined
+        }
+        onDismiss={handleClose}
+      />
+    </div>
   );
 };