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

package.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.19",
     "@tsparticles/engine": "^3.4.0",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.4.0",
@@ -19,7 +22,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.1"
+    "react-otp-input": "^3.1.1",
+    "react-router-dom": "^6.23.1",
+    "react-use-measure": "^2.1.1"
   },
   "devDependencies": {
     "@types/nprogress": "^0.2.3",

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

src/components/button/index.tsx

@@ -5,7 +5,7 @@ function Button({ children, onClick, extra, active }: ButtonProps) {
     <button
       className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white ${
         active
-          ? "bg-yellow-600 shadow-yellow-600 hover:shadow-gray-600 shadow-lg text-white"
+          ? "!bg-secondTheme shadow-secondTheme hover:shadow-gray-600 shadow-lg"
           : ""
       } ${extra}`}
       onClick={onClick}

src/index.css

@@ -50,7 +50,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-yellow-600; /* رنگ نوار اسکرول */
+    @apply bg-secondTheme; /* رنگ نوار اسکرول */
     border-radius: 20px; /* گرد کردن نوار اسکرول */
     border: 3px solid transparent; /* ایجاد فضای خالی در اطراف نوار اسکرول */
     background-clip: content-box; /* اطمینان از حفظ فضای خالی */
@@ -90,4 +90,14 @@
       stroke-dashoffset: -20;
     }
   }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 }

tailwind.config.js

@@ -3,6 +3,9 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      colors: {
+        secondTheme: "#71fbb2",
+      },
       backgroundImage: {
         noisy: "url('/src/assets/bg/noisy.png')",
         banner: "url('/src/assets/bg/banner.svg')",