From 089abd53b0b95a8920e39aa62deb61c044aa529b Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Wed, 4 Sep 2024 17:42:55 +0800
Subject: [PATCH] update detail member

---
 .../user/member/ui/navbar_detail_member.tsx   | 91 +++++++++++--------
 1 file changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/module/user/member/ui/navbar_detail_member.tsx b/src/module/user/member/ui/navbar_detail_member.tsx
index a687ef1..5f4f63e 100644
--- a/src/module/user/member/ui/navbar_detail_member.tsx
+++ b/src/module/user/member/ui/navbar_detail_member.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile } from "@/module/_global";
-import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton } from "@mantine/core";
+import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { HiUser } from "react-icons/hi2";
 import DrawerDetailMember from "./drawer_detail_member";
@@ -68,12 +68,12 @@ export default function NavbarDetailMember({ id }: IMember) {
                   <Center>
                      <Avatar src={`/api/file/img?jenis=image&cat=user&file=${dataOne?.img}`} alt="it's me" size="xl" />
                   </Center>
-                  {loading ? 
+                  {loading ?
                      <>
-                     <Skeleton height={25} mt={10} width={"40%"} />
-                     <Skeleton height={15} mt={12} width={"30%"} />
+                        <Skeleton height={25} mt={10} width={"40%"} />
+                        <Skeleton height={15} mt={12} width={"30%"} />
                      </>
-                  :
+                     :
                      <>
                         <Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
                         <Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
@@ -82,41 +82,60 @@ export default function NavbarDetailMember({ id }: IMember) {
                </Stack>
             </LayoutNavbarHome>
             {loading
-               ? 
+               ?
                <SkeletonDetailProfile />
                :
-               <Box p={20}>
+               <Stack p={20}>
                   <Group justify="space-between" grow py={5}>
-                     <Group>
-                        <RiIdCardFill size={28} />
-                        <Text fz={18}>NIK</Text>
-                     </Group>
-                     <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
+                     <Text fw={'bold'} fz={20}>Informasi</Text>
                   </Group>
-                  <Group justify="space-between" grow py={5}>
-                     <Group>
-                        <FaSquarePhone size={28} />
-                        <Text fz={18}>No Telepon</Text>
-                     </Group>
-                     <Text fz={18} fw={'bold'} ta={"right"}>+{dataOne?.phone}</Text>
-                  </Group>
-                  <Group justify="space-between" grow py={5}>
-                     <Group>
-                        <MdEmail size={28} />
-                        <Text fz={18}>Email</Text>
-                     </Group>
-                     <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.email}</Text>
-                  </Group>
-                  <Group justify="space-between" grow py={5}>
-                     <Group>
-                        <IoMaleFemale size={28} />
-                        <Text fz={18}>Gender</Text>
-                     </Group>
-                     <Text fz={18} fw={'bold'} ta={"right"}>
-                        {dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
-                     </Text>
-                  </Group>
-               </Box>
+                  <Grid>
+                     <Grid.Col span={4}>
+                        <Group>
+                           <RiIdCardFill size={25} />
+                           <Text fz={15}>NIK</Text>
+                        </Group>
+                     </Grid.Col>
+                     <Grid.Col span={8}>
+                        <Text fz={15} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
+                     </Grid.Col>
+                  </Grid>
+                  <Grid>
+                     <Grid.Col span={5}>
+                        <Group>
+                           <FaSquarePhone size={25} />
+                           <Text fz={15}>No Telpon</Text>
+                        </Group>
+                     </Grid.Col>
+                     <Grid.Col span={7}>
+                        <Text fz={15} fw={'bold'} ta={"right"}>+62{dataOne?.phone}</Text>
+                     </Grid.Col>
+                  </Grid>
+                  <Grid>
+                     <Grid.Col span={4}>
+                        <Group>
+                           <MdEmail size={25} />
+                           <Text fz={15}>Email</Text>
+                        </Group>
+                     </Grid.Col>
+                     <Grid.Col span={8}>
+                        <Text fz={15} fw={'bold'} ta={"right"} lineClamp={1}>{dataOne?.email}</Text>
+                     </Grid.Col>
+                  </Grid>
+                  <Grid>
+                     <Grid.Col span={6}>
+                        <Group>
+                           <IoMaleFemale size={25} />
+                           <Text fz={15}>Jenis Kelamin</Text>
+                        </Group>
+                     </Grid.Col>
+                     <Grid.Col span={6}>
+                        <Text fz={15} fw={'bold'} ta={"right"}>
+                           {dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
+                        </Text>
+                     </Grid.Col>
+                  </Grid>
+               </Stack>
             }
             <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
                <DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} />