feat : change color theme second custom

src/components/productBox/index.tsx

@@ -1,6 +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";
 
 const ProductBox = ({
   title,
@@ -10,6 +12,10 @@ const ProductBox = ({
   btnText,
   variant,
 }: ProductBoxProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const toggleModal = () => {
+    setIsOpen(true);
+  };
   return (
     <div
       className={`p-4 w-full h-full flex flex-col gap-3 justify-center items-center rounded-lg shadow-inner ${
@@ -20,6 +26,7 @@ const ProductBox = ({
           : variant === 3 && "shadow-indigo-800 bg-indigo-600"
       } bg-cover bg-center bg-banner`}
     >
+      <MuiModal isOpenModal={isOpen} setIsOpenModal={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">
@@ -41,7 +48,12 @@ const ProductBox = ({
         {price} تومان
       </div>
       <div className="w-full h-full grid grid-cols-1">
-        <Button extra="shadow-inner shadow-gray-400">{btnText}</Button>
+        <Button
+          extra="shadow-inner shadow-gray-400"
+          onClick={() => toggleModal()}
+        >
+          {btnText}
+        </Button>
       </div>
     </div>
   );