fix: styles and make it responsive

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>
+  );
+};