feat : add page profile (private component) and add section , modal for profile page

src/components/button/index.tsx

@@ -1,6 +1,6 @@
 import { ButtonProps } from "../../types/props";
 
-function Button({ children, onClick, extra, active }: ButtonProps) {
+function Button({ children, onClick, extra, active,...attrs }: ButtonProps) {
   return (
     <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 ${
@@ -10,6 +10,7 @@ function Button({ children, onClick, extra, active }: ButtonProps) {
       } ${extra}`}
       onClick={onClick}
       type="button"
+      {...attrs}
     >
       {children}
     </button>

src/components/input/index.tsx

@@ -6,6 +6,7 @@ const Input = ({
   type,
   name,
   placeholder,
+  labelStyle,
   extra,
   ...attrs
 }: InputProps) => {
@@ -14,7 +15,7 @@ const Input = ({
       {label && (
         <label
           htmlFor={id}
-          className="block mb-2 text-sm font-medium text-white"
+          className={`block mb-2 text-sm font-medium text-white ${labelStyle}`}
         >
           {label}
         </label>

src/components/productBox/components/MuiModalBuy.tsx

@@ -0,0 +1,67 @@
+import { Dispatch, SetStateAction } from "react";
+import MuiModal from "../../../common/modal";
+import Input from "../../input";
+import Button from "../../button";
+import { PiMinus, PiPlus } from "react-icons/pi";
+
+const MuiModalBuy = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  return (
+    <MuiModal
+      isOpenModal={isOpen}
+      setIsOpenModal={setIsOpen}
+      submitText="خرید"
+      title="خرید سرویس"
+      nameService="مولتی 1"
+    >
+      <div className="w-full h-full px-2 py-2 flex flex-col gap-3">
+        <h1 className="text-lg md:text-xl">
+          مبلغ قابل پرداخت :{" "}
+          <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>
+    </MuiModal>
+  );
+};
+
+export default MuiModalBuy;

src/components/productBox/index.tsx

@@ -1,8 +1,8 @@
 import { AM, EC, GA, US, GD, GB } from "country-flag-icons/react/1x1";
 import { ProductBoxProps } from "../../types/props";
 import Button from "../button";
-import MuiModal from "../../common/modal";
 import { useState } from "react";
+import MuiModalBuy from "./components/MuiModalBuy";
 
 const ProductBox = ({
   title,
@@ -26,7 +26,7 @@ const ProductBox = ({
           : variant === 3 && "shadow-indigo-800 bg-indigo-600"
       } bg-cover bg-center bg-banner`}
     >
-      <MuiModal isOpenModal={isOpen} setIsOpenModal={setIsOpen} />
+      <MuiModalBuy isOpen={isOpen} setIsOpen={setIsOpen} />
       <h1 className="max-md:text-xl md:text-2xl font-bold">{title}</h1>
       <div className="w-full h-full p-2 flex gap-2 justify-between items-center">
         <div className="w-full h-full flex flex-col gap-2">