feat : add modal details

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;