feat : add modal details

src/common/modal/index.tsx

@@ -36,13 +36,16 @@ export default function MuiModal({
         className="relative w-full h-full flex justify-center items-center border-none outline-none"
       >
         <motion.div
-          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"
+          className="max-md: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 }}
         >
-          <motion.div className="w-full h-full flex justify-between">
+          <motion.div className="w-full h-full flex gap-2 justify-between">
             <h1 className="text-lg md:text-xl font-bold">
-              {title} {nameService && <span className="text-green-600"> {nameService} </span>}
+              {title && title}
+              {nameService && (
+                <span className="text-green-600"> {nameService} </span>
+              )}
             </h1>
             <button onClick={handleClose}>
               <IoClose className="w-7 h-7" />

src/components/alert/Alert.tsx

@@ -57,7 +57,7 @@ const Alert = ({ children, type = "info", message }: AlertProps) => {
 
   return (
     <div
-      className={`flex items-center p-4 mb-4 text-sm ${text} rounded-lg ${bg} ${darkText} ${darkBg}`}
+      className={`w-full h-full flex items-center p-4 mb-4 text-xs md:text-sm ${text} rounded-lg ${bg} ${darkText} ${darkBg}`}
       role="alert"
     >
       <svg
@@ -71,7 +71,7 @@ const Alert = ({ children, type = "info", message }: AlertProps) => {
       </svg>
       <span className="sr-only">{children}</span>
       <div>
-        <span className="font-medium">{children}</span> {message}
+        <span className="font-medium">{children}</span> {message && message}
       </div>
     </div>
   );

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 && (
+      <ModalConfigDetails
-        <div className="absolute inset-0 flex items-center justify-center bg-opacity-50 rounded-md backdrop-blur-sm z-10">
+        isOpen={isOpen}
-          <p className="text-white font-bold px-1 bg-red-600 text-xs md:text-base rounded-md shadow-md shadow-red-600">
+        setIsOpen={setIsOpen}
-            کانفیگ <span className="text-secondTheme">{configName}</span> غیر فعال است
+        dateBuy={dateBuy}
-          </p>
+        isDisabled={isDisabled}
-        </div>
+        nameConfig={configName}
-      )}
+      />
-      <div
+      <div className="relative w-full h-full rounded-md">
-        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 && (
-          isDisabled ? "filter blur-sm" : ""
+          <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>تاریخ خرید : {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">
+              <span
-          {configName}
+                className="text-secondTheme cursor-pointer"
-        </li>
+                onClick={() => setIsOpen(true)}
-        <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 />
+              </span>
-          </Button>
+            </p>
-          <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-white">آموزش</Button>
+          </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;

src/types/props.d.ts

@@ -4,7 +4,7 @@ export type MessageType = "info" | "danger" | "success" | "warning" | "dark";
 export interface AlertProps {
   children: React.ReactNode;
   type?: "info" | "danger" | "success" | "warning" | "dark";
-  message: string;
+  message?: string;
 }
 
 // begin Button.tsx
@@ -99,7 +99,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 export interface MuiModalProps {
   isOpenModal: boolean;
   setIsOpenModal: SetStateAction;
-  title: string;
+  title?: string;
   nameService?: string;
   submitText: string;
   submitOnClick?: () => void;
@@ -111,3 +111,4 @@ export interface ConfigItemProps {
   configName: string;
   isDisabled: boolean;
 }
+