Fix: Avatar

Deskripsi:
- Avatar job
- Avatar collaboration
- Avatar event
## No Issuue

src/app_modules/_global/component/comp_avatar_and_username.tsx

@@ -10,17 +10,17 @@ import { funGlobal_CheckProfile } from "../fun/get";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
 
-type IFontSize = "xs" | "sm" | "md" | "lg" | "xl"
+type IFontSize = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_AvatarAndUsername({
   profile,
   component,
   sizeAvatar,
-  fontSize
+  fontSize,
 }: {
   profile: Prisma.ProfileSelect;
   component?: React.ReactNode;
   sizeAvatar?: number;
-  fontSize?: IFontSize | {}
+  fontSize?: IFontSize | {};
 }) {
   const router = useRouter();
   const [visible, setVisible] = useState(false);
@@ -57,11 +57,11 @@ export function ComponentGlobal_AvatarAndUsername({
             )}
           </ActionIcon>
         </Grid.Col>
-        <Grid.Col span={"auto"} style={{ minHeight: 50 }} >
-          <Stack justify="center"  h={30}>
+        <Grid.Col span={"auto"} style={{ minHeight: 50 }}>
+          <Stack justify="center" h={30}>
             <Text
               fw={"bold"}
-              fz={fontSize ? fontSize : "md"}
+              fz={fontSize ? fontSize : "sm"}
               lineClamp={1}
               onClick={() => onCheckProfile()}
             >
@@ -72,7 +72,9 @@ export function ComponentGlobal_AvatarAndUsername({
 
         {component && (
           <Grid.Col span={"auto"} style={{ minHeight: 50 }}>
-            {component}
+            <Stack justify="center" h={30}>
+              {component}
+            </Stack>
           </Grid.Col>
         )}
       </Grid>

src/app_modules/_global/component/comp_card_box_and_background.tsx

@@ -28,11 +28,11 @@ export function ComponentGlobal_CardStyles({
             : AccentColor.darkblue,
           border: `2px solid ${border ? border : AccentColor.blue}`,
           paddingInline: "16px",
-          paddingBlock: "20px",
+          paddingBlock: "16px",
           borderRadius: "10px",
           color: color ? color : "white",
           height: height ? height : "auto",
-          marginBottom: marginBottom ? marginBottom : "0x",
+          marginBottom: marginBottom ? marginBottom : "15px",
         }}
         onClick={onClickHandler}
       >

src/app_modules/_global/component/comp_load_image.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useState } from "react";
-import ComponentGlobal_Loader from "./loader";
-import { useRouter } from "next/navigation";
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_LoadImage({

src/app_modules/_global/component/comp_not_user_load_image.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { APIs } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
+export function ComponentGlobal_NotUserLoadImage({
+  fileId,
+  maw,
+  radius,
+}: {
+  fileId: string;
+  maw?: number | string;
+  radius?: IRadius;
+}) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const url = APIs.GET({ fileId: fileId });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  if (isImage === null)
+    return (
+      <Center>
+        <Skeleton h={250} radius={"sm"} w={200} />
+      </Center>
+    );
+
+  if (!isImage)
+    return (
+      <>
+        <Center h={250}>
+          <Image alt="No Image" maw={150} src={pathAssetImage.no_image} />
+        </Center>
+      </>
+    );
+
+  return (
+    <>
+      <Center h={"100%"}>
+        <Image
+          onClick={() => {
+            setIsLoading(true);
+            router.push(routerImagePreview.not_user_image({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          opacity={isLoading ? 0.5 : 1}
+          radius={radius ? radius : 0}
+          alt="Image"
+          maw={maw ? maw : 200}
+          miw={200}
+          src={url}
+        />
+
+        {isLoading ? (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        ) : (
+          ""
+        )}
+      </Center>
+    </>
+  );
+}

src/app_modules/_global/component/index.ts

@@ -7,6 +7,7 @@ import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
 import { ComponentGlobal_LoaderAvatar } from "./comp_load_avatar";
 import { ComponentGlobal_LoadImage } from "./comp_load_image";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
+import { ComponentGlobal_NotUserLoadImage } from "./comp_not_user_load_image";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
 import ComponentGlobal_ErrorInput from "./error_input";
@@ -25,3 +26,4 @@ export { ComponentGlobal_ErrorInput };
 export { ComponentGlobal_ButtonUploadFileImage };
 export { ComponentGlobal_LoaderAvatar };
 export { ComponentGlobal_AvatarAndUsername };
+export { ComponentGlobal_NotUserLoadImage };