feat : add modal details

src/pages/profile/section/ProductConfigList.tsx

@@ -1,8 +1,10 @@
 import ConfigItem from "./components/ConfigItem";
+import ProfileImage from "./components/ProfileImage";
 
 const ProductConfigList = () => {
   return (
-    <div className="w-full h-full p-4 glass flex flex-col gap-3 pt-14">
+    <div className="w-full h-full p-5 glass flex flex-col gap-3">
+      <ProfileImage />
       <p className="max-md:text-lg text-xl font-bold text-center">
         لیست کانفیگ ها
       </p>

src/pages/profile/section/ProfileDetails.tsx

@@ -7,7 +7,6 @@ const ProfileDetails = () => {
   return (
     <div className="relative z-[10] w-full h-32 max-md:h-20 flex flex-row-reverse justify-between glass items-center py-2 px-4">
       <EditProfile />
-      <ProfileImage />
       <ProductDetails />
     </div>
   );
@@ -21,7 +20,7 @@ const EditProfile = () => {
     <div className="w-full h-full flex justify-end items-center">
       <ModalEditProfile isOpen={isOpen} setIsOpen={setIsOpen} />
       <Button
-        extra="!py-4 max-md:!py-2 max-md:px-2 md:ml-4"
+        extra="!py-4 max-md:!py-2 max-md:px-2"
         onClick={() => setIsOpen(true)}
       >
         <MdEdit className="scale-[1.4] max-md:scale-100" />
@@ -30,29 +29,17 @@ const EditProfile = () => {
   );
 };
 
-const ProfileImage = () => {
-  return (
-    <div className="relative w-full h-full flex justify-center items-center">
-      <div className="absolute w-auto h-auto border-4 border-secondTheme rounded-full max-md:scale-90 max-md:top-1/3 top-1/2">
-        <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
-          <circle r="45" cx="50" cy="50" fill="#111" />
-        </svg>
-      </div>
-    </div>
-  );
-};
-
 const ProductDetails = () => {
   return (
     <div className="w-full h-full flex justify-start items-center">
       <div className="md:mr-4 w-auto h-auto flex flex-col max-md:text-[12px] text-lg md:gap-2">
         <p className="text-nowrap">
           کانفیگ های فعال :{" "}
-          <span className="px-2 rounded-md bg-green-600"> 2 </span>
+          <span className="px-1 md:px-2 rounded-md bg-green-600"> 2 </span>
         </p>
         <p className="text-nowrap">
           کانفیگ های غیر فعال :{" "}
-          <span className="px-2 rounded-md bg-yellow-400"> 10 </span>
+          <span className="px-1 md:px-2 rounded-md bg-yellow-400"> 10 </span>
         </p>
       </div>
     </div>

src/pages/profile/section/components/ConfigItem.tsx

@@ -1,34 +1,63 @@
 import { IoCopy } from "react-icons/io5";
 import Button from "../../../../components/button";
 import { ConfigItemProps } from "../../../../types/props";
+import ModalConfigDetails from "./ModalConfigDetails";
+import { useState } from "react";
 
 const ConfigItem = ({ dateBuy, configName, isDisabled }: ConfigItemProps) => {
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <div className="relative w-full h-full rounded-md">
-      {isDisabled && (
-        <div className="absolute inset-0 flex items-center justify-center bg-opacity-50 rounded-md backdrop-blur-sm z-10">
-          <p className="text-white font-bold px-1 bg-red-600 text-xs md:text-base rounded-md shadow-md shadow-red-600">
-            کانفیگ <span className="text-secondTheme">{configName}</span> غیر فعال است
-          </p>
-        </div>
-      )}
-      <div
-        className={`w-full h-full p-3 rounded-md text-xs md:text-base gap-2 flex justify-between items-center text-secondTheme bg-gray-900 shadow-md shadow-gray-900 ${
-          isDisabled ? "filter blur-sm" : ""
-        }`}
-      >
-        <p>تاریخ خرید : {dateBuy}</p>
-        <li className="px-2 py-1 bg-secondTheme shadow-md shadow-secondTheme rounded-md w-auto h-auto text-gray-900 font-bold list-none">
-          {configName}
-        </li>
-        <div className="flex flex-row-reverse gap-2 justify-end items-center">
-          <Button extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white">
-            <IoCopy />
-          </Button>
-          <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-white">آموزش</Button>
+    <>
+      <ModalConfigDetails
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        dateBuy={dateBuy}
+        isDisabled={isDisabled}
+        nameConfig={configName}
+      />
+      <div className="relative w-full h-full rounded-md">
+        {isDisabled && (
+          <div className="absolute inset-0 flex items-center justify-center bg-opacity-50 rounded-md backdrop-blur-sm z-10">
+            <p className="text-white font-bold px-1 bg-red-600 text-xs md:text-base rounded-md shadow-md shadow-red-600">
+              کانفیگ <span className="text-secondTheme">{configName}</span> غیر
+              فعال است .{" "}
+              <span
+                className="text-secondTheme cursor-pointer"
+                onClick={() => setIsOpen(true)}
+              >
+                تمدید
+              </span>
+            </p>
+          </div>
+        )}
+        <div
+          className={`w-full h-full p-3 rounded-md text-xs md:text-base gap-2 flex justify-between items-center text-secondTheme bg-gray-900 shadow-md shadow-gray-900 ${
+            isDisabled ? "filter blur-sm" : ""
+          }`}
+        >
+          <p className="max-md:hidden">تاریخ خرید : {dateBuy}</p>
+          <li className="px-2 py-1 bg-secondTheme shadow-md shadow-secondTheme rounded-md w-auto h-auto text-gray-900 font-bold list-none">
+            {configName}
+          </li>
+          <div className="max-md:hidden flex flex-row-reverse gap-2 justify-end items-center">
+            <Button extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white">
+              <IoCopy />
+            </Button>
+            <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-white">
+              آموزش
+            </Button>
+          </div>
+          <div className="md:hidden flex flex-row-reverse gap-2 justify-end items-center">
+            <Button
+              extra="!m-0 !px-2 !py-1 shadow-md shadow-white"
+              onClick={() => setIsOpen(true)}
+            >
+              مشاهده جزئیات
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 export default ConfigItem;

src/pages/profile/section/components/ModalConfigDetails.tsx

@@ -0,0 +1,53 @@
+import { Dispatch, SetStateAction } from "react";
+import MuiModal from "../../../../common/modal";
+import Button from "../../../../components/button";
+import { IoCopy } from "react-icons/io5";
+import Alert from "../../../../components/alert/Alert";
+
+const ModalConfigDetails = ({
+  isOpen,
+  setIsOpen,
+  isDisabled,
+  dateBuy,
+  nameConfig,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  isDisabled: boolean;
+  dateBuy: string;
+  nameConfig: string;
+}) => {
+  return (
+    <MuiModal
+      isOpenModal={isOpen}
+      setIsOpenModal={setIsOpen}
+      submitText="باشه"
+      nameService={nameConfig}
+    >
+      {isDisabled && <Alert type="warning"> {nameConfig} غیر فعال است </Alert>}
+      <div className="w-full h-full flex flex-col p-3 gap-4 border-2 border-gray-800 rounded-md max-sm:text-xs max-md:text-sm text-base">
+        <h1 className="w-full h-full text-center rounded-md p-1 md:p-2 bg-gray-800">
+          تاریخ خرید : {dateBuy}
+        </h1>
+        <div className="w-full h-full flex flex-row-reverse gap-2 justify-center items-center">
+          {isDisabled ? (
+            <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-secondTheme !bg-secondTheme ">
+              تمدید
+            </Button>
+          ) : (
+            <>
+              <Button extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white">
+                <IoCopy />
+              </Button>
+              <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-white">
+                آموزش
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </MuiModal>
+  );
+};
+
+export default ModalConfigDetails;

src/pages/profile/section/components/ProfileImage.tsx

@@ -0,0 +1,13 @@
+const ProfileImage = () => {
+  return (
+    <div className="relative w-full h-full flex justify-center items-center">
+      <div className="relative w-auto h-auto border-4 border-secondTheme rounded-full max-md:scale-90">
+        <svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
+          <circle r="45" cx="50" cy="50" fill="#111" />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileImage;