feat : dynamic profile api and add logout btn

src/pages/profile/section/ProductConfigList.tsx

@@ -1,10 +1,34 @@
+import { LoaderIcon } from "react-hot-toast";
+import Alert from "../../../components/alert/Alert";
+import Button from "../../../components/button";
+import { ProfileDetailsProps } from "../../../types/props";
 import ConfigItem from "./components/ConfigItem";
+import ConfigItemLoading from "./components/ConfigItemLoading";
 import ProfileImage from "./components/ProfileImage";
+import { Fragment } from "react/jsx-runtime";
 
-const ProductConfigList = () => {
+const ProductConfigList = ({
+  data,
+  isLoading,
+  isFetching,
+  error,
+  userTitle,
+}: ProfileDetailsProps) => {
   return (
     <div className="w-full h-full p-5 glass flex flex-col gap-3">
       <ProfileImage />
+      <div className="w-full h-full flex justify-center items-center">
+        <Button extra="!py-3 max-md:!py-1 max-md:px-2 !bg-gray-800 !text-white">
+          {isLoading || isFetching ? (
+            <LoaderIcon className="m-1.5" />
+          ) : error ? (
+            "error"
+          ) : (
+            userTitle
+          )}
+        </Button>
+      </div>
+
       <p className="max-md:text-lg text-xl font-bold text-center">
         لیست کانفیگ ها
       </p>
@@ -12,21 +36,33 @@ const ProductConfigList = () => {
         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}
-        />
+        {isLoading || isFetching ? (
+          Array(3)
+            .fill(null)
+            .map((_, i) => (
+              <Fragment key={i}>
+                <ConfigItemLoading />
+              </Fragment>
+            ))
+        ) : error ? (
+          <Alert type="danger" message="خطایی با این موضوع رخ داد: ">
+            {error.message}
+          </Alert>
+        ) : (
+          data?.result?.configs?.map((item) => {
+            return (
+              <Fragment key={item.id}>
+                <ConfigItem
+                  configName={item.title}
+                  dateBuy={item.created_at || "تاریخ نامعتبر"}
+                  isDisabled={false}
+                  isShowTraffic={item.show_traffic}
+                  textCopy={item.url}
+                />
+              </Fragment>
+            );
+          })
+        )}
       </div>
     </div>
   );