feat : chnage content of Modal product

src/common/modal/index.tsx

@@ -5,6 +5,8 @@ import { IoClose } from "react-icons/io5";
 import Button from "../../components/button";
 import { MuiModalProps } from "../../types/props";
 import { useNavigate } from "react-router-dom";
+import Input from "../../components/input";
+import { PiMinus, PiPlus } from "react-icons/pi";
 
 export default function MuiModal({
   isOpenModal,
@@ -33,7 +35,7 @@ export default function MuiModal({
         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"
+          className="max-md:max-w-72 md:w-80 lg: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 }}
         >
@@ -45,12 +47,47 @@ export default function MuiModal({
               <IoClose className="w-7 h-7" />
             </button>
           </motion.div>
-          <motion.div className="w-full h-full flex justify-between text-base md:text-lg">
+          <motion.div className="w-full h-full flex flex-col justify-between text-center items-center">
-            <div className="w-full h-full px-4 py-2">
+            <div className="w-full h-full px-2 py-2 flex flex-col gap-3">
-              <h1>
+              <h1 className="text-lg md:text-xl">
-                کاربر گرامی لطفا برای خرید سرویس ابتدا باید{" "}
+                مبلغ قابل پرداخت :{" "}
-                <span className="text-green-600">وارد</span> شوید
+                <span className="px-2 py-[1px] rounded-md bg-secondTheme text-black">
+                  100/000
+                </span>
               </h1>
+              <p className="text-sm md:text-base text-gray-500">
+                در صورت نداشتن کد تخفیف پرداخت رو بزنید
+              </p>
+            </div>
+            <div className="w-full h-full p-2 flex gap-2 justify-center">
+              <Input type="text" id="1" name="offer" />
+              <Button extra="!bg-green-600"> اعمال </Button>
+            </div>
+            <div className="w-full h-full px-4 py-2 flex gap-3 justify-center">
+              <p className="text-sm md:text-base text-gray-500">تعداد:</p>
+              <div className="bg-gray-700 rounded-md flex justify-between gap-1 items-center px-1">
+                <PiMinus className="cursor-pointer" />
+                <input
+                  type="number"
+                  className="w-10 bg-transparent focus:ring-0 outline-none border-none ring-0"
+                  value={1}
+                />
+                <PiPlus className="cursor-pointer" />
+              </div>
+            </div>
+            <div className="w-full h-full px-4 py-2 flex flex-col gap-3 justify-center">
+              <div className="flex justify-between px-4 py-1 shadow-md shadow-gray-800 rounded-md bg-gray-800">
+                <p className="text-sm md:text-base">حجم :</p>
+                <p className="text-sm md:text-base">10 گیگ</p>
+              </div>
+              <div className="flex justify-between px-4 py-1 shadow-md shadow-gray-800 rounded-md bg-gray-800">
+                <p className="text-sm md:text-base">محدودیت کاربر :</p>
+                <p className="text-sm md:text-base">بدون محدودیت</p>
+              </div>
+              <div className="flex justify-between px-4 py-1 shadow-md shadow-gray-800 rounded-md bg-gray-800">
+                <p className="text-sm md:text-base">مدت زمان :</p>
+                <p className="text-sm md:text-base">یک ماه</p>
+              </div>
             </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">

src/components/input/index.tsx

@@ -11,9 +11,14 @@ const Input = ({
 }: InputProps) => {
   return (
     <div>
-      <label htmlFor={id} className="block mb-2 text-sm font-medium text-white">
+      {label && (
+        <label
+          htmlFor={id}
+          className="block mb-2 text-sm font-medium text-white"
+        >
           {label}
         </label>
+      )}
       <input
         type={type}
         name={name}

src/index.css

@@ -59,7 +59,7 @@
   /* برای مرورگر Firefox */
   * {
     scrollbar-width: thin; /* عرض نوار اسکرول */
-    scrollbar-color: #ca8a04 transparent; /* رنگ نوار اسکرول و پس‌زمینه */
+    scrollbar-color: #71fbb2 transparent; /* رنگ نوار اسکرول و پس‌زمینه */
   }
 
   /* برای مرورگرهای مبتنی بر Blink (مثل Edge) */
@@ -72,7 +72,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #ca8a04;
+    @apply bg-secondTheme;
     border-radius: 20px;
     border: 3px solid transparent;
     background-clip: content-box;

src/types/props.d.ts

@@ -87,7 +87,7 @@ export interface ProductBoxProps {
 }
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
+  label?: string;
   id?: string;
   type: string;
   name?: string;