push rasad front on new repo

2026-01-18 14:32:49 +03:30
commit 4fe6e70525
2139 changed files with 303150 additions and 0 deletions
--- a/src/components/modal/Modal.js
+++ b/src/components/modal/Modal.js
@@ -0,0 +1,126 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import ModalBox from "@mui/material/Modal";
+import { useDispatch, useSelector } from "react-redux";
+import { CLOSE_MODAL } from "../../lib/redux/slices/appSlice";
+import { Typography } from "@mui/material";
+import { SPACING } from "../../data/spacing";
+import CancelIcon from "@mui/icons-material/Cancel";
+const isMobile = window.innerWidth <= 600;
+
+export const Modal = () => {
+  const { modalState, modalContent, modalTitle, modalOnClose, modalSize } =
+    useSelector((state) => state.appSlice.modal);
+
+  const size = modalSize || 500;
+  const style = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: isMobile ? "90%" : size,
+    bgcolor: "background.paper",
+    // border: "2px solid #000",
+    boxShadow: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    gap: SPACING.SMALL,
+    borderRadius: 2,
+    p: 2,
+  };
+
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    dispatch(CLOSE_MODAL());
+  }, []);
+
+  const handleClose = () => {
+    dispatch(CLOSE_MODAL());
+    if (modalOnClose) {
+      modalOnClose();
+    }
+  };
+
+  const successModal = (
+    <Box display="inline-block" width="100%" mb={SPACING.SMALL}>
+      <CancelIcon
+        fontSize="medium"
+        sx={{ cursor: "pointer", float: "left", position: "absolute" }}
+        onClick={handleClose}
+      />
+      <Typography
+        sx={{
+          display: "inline-block",
+          mt: "6px",
+          fontWeight: "bold",
+          textAlign: "center",
+          width: "100%",
+          color: (theme) => theme.palette.success.main,
+        }}
+      >
+        عملیات با موفقیت انجام شد!
+      </Typography>
+    </Box>
+  );
+  const errorModal = (
+    <Box display="inline-block" width="100%" mb={SPACING.SMALL}>
+      <CancelIcon
+        fontSize="medium"
+        sx={{ cursor: "pointer", float: "left", position: "absolute" }}
+        onClick={handleClose}
+      />
+      <Typography
+        sx={{
+          display: "inline-block",
+          mt: "5px",
+          fontWeight: "bold",
+          textAlign: "center",
+          width: "100%",
+          color: (theme) => theme.palette.error.main,
+        }}
+      >
+        مشکلی پیش آمده است!
+      </Typography>
+    </Box>
+  );
+
+  return (
+    <ModalBox
+      open={modalState}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>
+        {modalTitle === "success" && successModal}
+        {modalTitle === "error" && errorModal}
+        {modalTitle !== "success" && modalTitle !== "error" && (
+          <>
+            <Box display="inline-block" width="100%" mb={SPACING.SMALL}>
+              <CancelIcon
+                fontSize="medium"
+                sx={{ cursor: "pointer", float: "left", position: "absolute" }}
+                onClick={handleClose}
+              />
+              <Typography
+                sx={{
+                  display: "inline-block",
+                  mt: "5px",
+                  fontWeight: "bold",
+                  textAlign: "center",
+                  width: "100%",
+                }}
+              >
+                {modalTitle}
+              </Typography>
+            </Box>
+            {modalContent}
+          </>
+        )}
+      </Box>
+    </ModalBox>
+  );
+};