("gs_profile", null);
+
+
diff --git a/src/app_modules/katalog/view/view.tsx b/src/app_modules/katalog/view/view.tsx
index d9f03424..682cbc10 100644
--- a/src/app_modules/katalog/view/view.tsx
+++ b/src/app_modules/katalog/view/view.tsx
@@ -1,13 +1,158 @@
-"use client"
+"use client";
-import { BackgroundImage, Box, Center, Text } from "@mantine/core"
+import { Warna } from "@/app/lib/warna";
+import {
+ ActionIcon,
+ BackgroundImage,
+ Box,
+ Center,
+ Flex,
+ Grid,
+ Group,
+ Image,
+ Paper,
+ Text,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+ IconAddressBook,
+ IconCamera,
+ IconEditCircle,
+ IconGenderFemale,
+ IconGenderMale,
+ IconHome,
+ IconMail,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { getProfile } from "../profile";
+import { gs_profile } from "../profile/state/global_state";
+import { myConsole } from "@/app/fun/my_console";
+import { useAtom } from "jotai";
+import { g_getProfile } from "../profile/fun/fun-get-profile";
-export default function KatalogView(){
- return <>
+export default function KatalogView() {
+ const router = useRouter();
-
- Katalog User
-
-
+ //Get data profile
+ const [profile, setProfile] = useAtom(gs_profile);
+ useShallowEffect(() => {
+ g_getProfile(setProfile);
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ router.push("/dev/katalog/profile/upload")}
+ sx={{ position: "relative" }}
+ >
+
+
+
+
+
+
+
+
+ {profile?.name}
+
+ @{profile?.User?.username}
+
+ {
+ router.push("/dev/katalog/profile/edit");
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+ +{profile?.User.nomor}
+
+
+
+
+
+
+
+
+
+
+ {" "}
+ {profile?.email}
+
+
+
+
+
+
+
+
+
+ {profile?.alamat}
+
+
+
+ {(() => {
+ if (profile?.jenisKelamin === "Laki - laki") {
+ return (
+ <>
+
+
+
+
+
+ {profile?.jenisKelamin}
+
+
+ >
+ );
+ } else {
+ return (
+ <>
+
+
+
+
+
+ {profile?.jenisKelamin}
+
+
+ >
+ );
+ }
+ })()}
+
+
+ {/* {JSON.stringify(profile, null, 2)} */}
>
-}
\ No newline at end of file
+ );
+}