update snackbar

TogetherCrew · Sep 1, 2024 · c5698e9 · c5698e9
1 parent f16afe1
commit c5698e9
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 19 deletions.
diff --git a/src/components/shared/CustomSnackbar.tsx b/src/components/shared/CustomSnackbar.tsx
@@ -1,5 +1,4 @@
-import { Snackbar, Alert } from '@mui/material';
-
+import { Snackbar, Alert, AlertTitle, Link, Box } from '@mui/material';
 import useSnackbarStore from '../../store/useSnackbarStore';
 
 /**
@@ -16,18 +15,31 @@ export const CustomSnackbar = (): JSX.Element => {
       anchorOrigin={
         options?.position || { vertical: 'bottom', horizontal: 'right' }
       }
-      autoHideDuration={options?.duration}
+      autoHideDuration={options?.duration ?? 3000}
       open={open}
       onClose={closeSnackbar}
     >
       <Alert
         severity={options?.severity || 'info'}
-        sx={{ width: '100%' }}
+        sx={{ width: '100%', display: 'flex', alignItems: 'center' }}
         variant="filled"
         onClose={closeSnackbar}
+        icon={options?.icon}
+        aria-live="assertive"
       >
-        {message}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Box>
+            <AlertTitle>{message}</AlertTitle>
+            {options?.linkText && options?.linkUrl && (
+              <Link href={options.linkUrl} color="inherit" underline="always">
+                {options.linkText}
+              </Link>
+            )}
+          </Box>
+        </Box>
       </Alert>
     </Snackbar>
   );
 };
+
+export default CustomSnackbar;
diff --git a/src/pages/Dashboard/Dashboard.spec.tsx b/src/pages/Dashboard/Dashboard.spec.tsx
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
diff --git a/src/pages/Dashboard/index.ts b/src/pages/Dashboard/index.ts
diff --git a/src/store/useSnackbarStore.ts b/src/store/useSnackbarStore.ts
@@ -13,6 +13,9 @@ interface SnackbarOptions {
   severity?: 'success' | 'error' | 'warning' | 'info';
   duration?: number;
   position?: SnackbarOrigin;
+  icon?: React.ReactNode;
+  linkText?: string;
+  linkUrl?: string;
 }
 
 const useSnackbarStore = create<SnackbarState>((set) => ({