Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

src/app_modules/event/component/detail/detail_data.tsx

@@ -1,12 +1,8 @@
 "use client";
 
-import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
-import moment from "moment";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Grid, Stack, Text, Title } from "@mantine/core";
 import { MODEL_EVENT } from "../../model/interface";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_DetailData({
   data,
@@ -23,15 +19,7 @@ export default function ComponentEvent_DetailData({
 
   return (
     <>
-      {/* <pre>{JSON.stringify(jam)}</pre> */}
-      <Paper
-        p={"md"}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-        }}
-      >
+      <ComponentGlobal_CardStyles marginBottom={"16px"}>
         <Stack px={"sm"} spacing={"lg"}>
           <Title lineClamp={2} align="center" w={"100%"} order={4}>
             {data ? data?.title : null}
@@ -83,7 +71,7 @@ export default function ComponentEvent_DetailData({
             <Text>{data ? data?.deskripsi : null}</Text>
           </Stack>
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/event/component/detail/detail_main.tsx

@@ -5,6 +5,10 @@ import moment from "moment";
 import { MODEL_EVENT } from "../../model/interface";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 
 export default function ComponentEvent_DetailMainData({
   data,
@@ -14,29 +18,23 @@ export default function ComponentEvent_DetailMainData({
   const tgl = data.tanggal;
   const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
 
- const jam = tgl.toLocaleTimeString([], {
-   timeStyle: "short",
-   hourCycle: "h24",
- });
+  const jam = tgl.toLocaleTimeString([], {
+    timeStyle: "short",
+    hourCycle: "h24",
+  });
 
   return (
     <>
-      <Paper
-        p={"md"}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-        }}
-      >
-        <Stack>
-          <ComponentGlobal_AuthorNameOnHeader
-            authorName={data.Author.Profile.name}
-            imagesId={data.Author.Profile.imagesId}
-            profileId={data.Author.Profile.id}
+      <ComponentGlobal_CardStyles>
+        <Stack px={"xs"} spacing={"xl"}>
+          <ComponentGlobal_AvatarAndUsername
+            profile={data?.Author?.Profile as any}
           />
-          <Stack px={"sm"}>
-            <Title align="center" order={4}>{data ? data.title : null}</Title>
+
+          <Stack>
+            <Title align="center" order={4}>
+              {data ? data.title : null}
+            </Title>
             <Grid>
               <Grid.Col span={4}>
                 <Text fw={"bold"} fz={"sm"}>
@@ -85,7 +83,7 @@ export default function ComponentEvent_DetailMainData({
             </Stack>
           </Stack>
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/event/component/detail/list_peserta.tsx

@@ -1,22 +1,19 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import {
-  Paper,
-  Stack,
   Center,
-  Title,
-  Grid,
-  Avatar,
-  Divider,
+  Stack,
   Text,
+  Title
 } from "@mantine/core";
 import _ from "lodash";
 
-import peserta from "../../main/kontribusi/peserta";
-import { MODEL_EVENT_PESERTA } from "../../model/interface";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 import { useRouter } from "next/navigation";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function ComponentEvent_ListPeserta({
   listPeserta,
@@ -28,16 +25,8 @@ export default function ComponentEvent_ListPeserta({
   const router = useRouter();
   return (
     <>
-      <Paper
-        mt={"lg"}
-        p={"md"}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-        }}
-      >
-        <Stack spacing={"md"} p={"md"}>
+      <ComponentGlobal_CardStyles>
+        <Stack spacing={"md"} px={"sm"}>
           <Center>
             <Title order={5}>Daftar Peserta ({total})</Title>
           </Center>
@@ -52,37 +41,18 @@ export default function ComponentEvent_ListPeserta({
             <Stack>
               {listPeserta.map((e, i) => (
                 <Stack key={i} spacing={"sm"}>
-                  <Grid>
-                    <Grid.Col
-                      span={"content"}
-                      onClick={() => {
-                        router.push(RouterProfile.katalog + e.User.Profile.id);
-                      }}
-                    >
-                      <Avatar
-                        sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
-                        radius={"xl"}
-                        bg={"gray"}
-                        size={30}
-                        src={
-                          RouterProfile.api_foto_profile +
-                          e.User.Profile.imagesId
-                        }
-                      />
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Stack justify="center" h={"100%"}>
-                        <Text>{e.User.Profile.name}</Text>
-                      </Stack>
-                    </Grid.Col>
-                  </Grid>
-                  <Divider />
+                  <ComponentGlobal_AvatarAndUsername
+                    profile={e.User.Profile as any}
+                    sizeAvatar={30}
+                    fontSize={"sm"}
+                  />
+                  {/* <Divider /> */}
                 </Stack>
               ))}
             </Stack>
           )}
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }