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

src/pages/profile/index.tsx

@@ -0,0 +1,13 @@
+import ProfileDetails from "./section/ProfileDetails";
+import ProductConfigList from "./section/ProductConfigList";
+
+const Profile = () => {
+  return (
+    <div className="relative h-full w-full flex flex-col gap-4">
+        <ProfileDetails />
+        <ProductConfigList />
+    </div>
+  );
+};
+
+export default Profile;

src/pages/profile/section/ProductConfigList.tsx

@@ -0,0 +1,33 @@
+import ConfigItem from "./components/ConfigItem";
+
+const ProductConfigList = () => {
+  return (
+    <div className="w-full h-full p-4 glass flex flex-col gap-3 pt-14">
+      <p className="max-md:text-lg text-xl font-bold text-center">
+        لیست کانفیگ ها
+      </p>
+      <div
+        className="w-full h-full p-3 flex flex-col gap-3
+       justify-center items-center"
+      >
+        <ConfigItem
+          configName="سرویس تست 1 روزه"
+          dateBuy="1402/2/3"
+          isDisabled={false}
+        />
+        <ConfigItem
+          configName="سرویس مولتی 1"
+          dateBuy="1403/2/3"
+          isDisabled={false}
+        />
+        <ConfigItem
+          configName="سرویس کاهش پینگ"
+          dateBuy="1402/4/3"
+          isDisabled={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProductConfigList;

src/pages/profile/section/ProfileDetails.tsx

@@ -0,0 +1,60 @@
+import { MdEdit } from "react-icons/md";
+import Button from "../../../components/button";
+import ModalEditProfile from "./components/ModalEditProfile";
+import { useState } from "react";
+
+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>
+  );
+};
+
+export default ProfileDetails;
+
+const EditProfile = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <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"
+        onClick={() => setIsOpen(true)}
+      >
+        <MdEdit className="scale-[1.4] max-md:scale-100" />
+      </Button>
+    </div>
+  );
+};
+
+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>
+        </p>
+        <p className="text-nowrap">
+          کانفیگ های غیر فعال :{" "}
+          <span className="px-2 rounded-md bg-yellow-400"> 10 </span>
+        </p>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { IoCopy } from "react-icons/io5";
+import Button from "../../../../components/button";
+import { ConfigItemProps } from "../../../../types/props";
+
+const ConfigItem = ({ dateBuy, configName, isDisabled }: ConfigItemProps) => {
+  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>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ConfigItem;

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

@@ -0,0 +1,26 @@
+import { Dispatch, SetStateAction } from "react";
+import MuiModal from "../../../../common/modal";
+import Input from "../../../../components/input";
+
+const ModalEditProfile = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  return (
+    <MuiModal
+      isOpenModal={isOpen}
+      setIsOpenModal={setIsOpen}
+      submitText="تایید"
+      title="ویرایش پروفایل"
+    >
+      <div className="relative w-full h-full px-2 md:px-4">
+        <Input type="text" label="ویرایش نام :" labelStyle="!text-start" extra="!w-full" />
+      </div>
+    </MuiModal>
+  );
+};
+
+export default ModalEditProfile;