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

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>
+  );
+};