feat : add pakcage : mui and otpInput . add modal components

src/common/modal/index.tsx

@@ -1,5 +1,64 @@
-const Modal = () => {
-  return <div>index</div>;
-};
+import Modal from "@mui/material/Modal";
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { IoClose } from "react-icons/io5";
+import Button from "../../components/button";
+import { MuiModalProps } from "../../types/props";
+import { useNavigate } from "react-router-dom";
 
-export default Modal;
+export default function MuiModal({
+  isOpenModal,
+  setIsOpenModal,
+}: MuiModalProps) {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => {
+    setOpen(false);
+    setIsOpenModal(false);
+  };
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isOpenModal) handleOpen();
+    else handleClose();
+  }, [isOpenModal]);
+
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        className="relative w-full h-full flex justify-center items-center border-none outline-none"
+      >
+        <motion.div
+          className="max-w-72 md:max-w-80 lg:max-w-96 min-h-80 shadow-xl shadow-[rgb(20,20,20)] bg-[rgb(20,20,20,0.99)] rounded-lg p-4 relative flex flex-col justify-between items-center gap-4"
+          initial={{ y: "-100vw" }}
+          animate={{ y: 0 }}
+        >
+          <motion.div className="w-full h-full flex justify-between">
+            <h1 className="text-lg md:text-xl font-bold">
+              خرید سرویس <span className="text-green-600"> مولتی 1 </span>
+            </h1>
+            <button onClick={handleClose}>
+              <IoClose className="w-7 h-7" />
+            </button>
+          </motion.div>
+          <motion.div className="w-full h-full flex justify-between text-base md:text-lg">
+            <div className="w-full h-full px-4 py-2">
+              <h1>
+                کاربر گرامی لطفا برای خرید سرویس ابتدا باید{" "}
+                <span className="text-green-600">وارد</span> شوید
+              </h1>
+            </div>
+          </motion.div>
+          <motion.div className="w-full h-full flex justify-end items-center gap-2 md:gap-3 text-lg md:text-xl">
+            <Button onClick={() => handleClose()}> بستن </Button>
+            <Button onClick={() => navigate("login")}> باشه </Button>
+          </motion.div>
+        </motion.div>
+      </Modal>
+    </div>
+  );
+}