fix: responsiveness

src/components/CardContainer.tsx

@@ -17,46 +17,59 @@ export function CardContainer({
     <Box
       sx={{
         width: '100%',
-        maxWidth: {
-          xs: '100%',
-          sm: '500px',
-          md: '818px',
-        },
         display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
+        justifyContent: 'center',
         px: { xs: 2, sm: 3, md: 4 },
-        // py: 2,
       }}
     >
       <Box
         sx={{
+          width: '100%',
+          maxWidth: {
+            xs: '100%',
+            sm: '500px',
+            md: '818px',
+          },
           display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          backgroundColor: highlighted ? 'primary.light' : 'background.default',
-          p: 2,
-          borderRadius: 1,
+          flexDirection: 'column',
+          gap: 2,
+          mx: 'auto',
+          px: { xs: 2, sm: 3, md: 4 },
         }}
       >
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          <Typography
-            variant="h6"
-            color={highlighted ? 'primary.main' : 'text.primary'}
-          >
-            {title}
-          </Typography>
-          <Typography
-            color={highlighted ? 'primary.main' : 'text.secondary'}
-            variant="body2"
-          >
-            {subtitle}
-          </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: { xs: 'flex-start', sm: 'center' },
+            flexDirection: { xs: 'column', sm: 'row' },
+            backgroundColor: highlighted
+              ? 'primary.light'
+              : 'background.default',
+            p: 2,
+            borderRadius: 1,
+            gap: { xs: 1, sm: 0 },
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography
+              variant="h6"
+              color={highlighted ? 'primary.main' : 'text.primary'}
+            >
+              {title}
+            </Typography>
+            <Typography
+              color={highlighted ? 'primary.main' : 'text.secondary'}
+              variant="body2"
+            >
+              {subtitle}
+            </Typography>
+          </Box>
+          {action}
         </Box>
-        {action}
-      </Box>
 
-      {children}
+        {children}
+      </Box>
     </Box>
   );
 }

src/components/CustomAlert.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Alert, IconButton, type AlertColor } from '@mui/material';
+import {
+  TickCircle,
+  CloseSquare,
+  Warning2,
+  InfoCircle,
+  CloseCircle,
+} from 'iconsax-react';
+
+type AlertType = AlertColor;
+
+interface CustomAlertProps {
+  message: string;
+  onClose: () => void;
+  severity?: AlertType;
+  open: boolean;
+  duration?: number;
+  delayOnClose?: number;
+  rtl?: boolean;
+  icon?: React.ReactNode;
+}
+
+const defaultIcons: Record<AlertType, React.ReactNode> = {
+  success: <TickCircle size="20" color="#fff" />,
+  error: <CloseSquare size="20" color="#fff" />,
+  warning: <Warning2 size="20" color="#fff" />,
+  info: <InfoCircle size="20" color="#fff" />,
+};
+
+export const CustomAlert: React.FC<CustomAlertProps> = ({
+  message,
+  severity,
+  open,
+  onClose,
+  duration = 4000,
+  delayOnClose = 2000,
+  rtl = false,
+  icon,
+}) => {
+  const [visible, setVisible] = useState(open);
+
+  useEffect(() => {
+    setVisible(open);
+  }, [open]);
+
+  useEffect(() => {
+    if (visible && duration > 0) {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        onClose();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [visible, duration, onClose]);
+
+  const handleClose = () => {
+    setTimeout(() => {
+      setVisible(false);
+      onClose();
+    }, delayOnClose);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 20,
+        left: 20,
+        zIndex: 9999,
+      }}
+    >
+      <Alert
+        severity={severity}
+        variant="filled"
+        icon={icon ?? defaultIcons[severity ?? 'success']}
+        action={
+          <IconButton onClick={handleClose} sx={{ color: 'black', p: 0.5 }}>
+            <CloseCircle size="20" />
+          </IconButton>
+        }
+        sx={{
+          width: '396px',
+          flexDirection: 'row-reverse',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          textAlign: rtl ? 'right' : 'left',
+          direction: rtl ? 'rtl' : 'ltr',
+        }}
+      >
+        {message}
+      </Alert>
+    </Box>
+  );
+};