Fix : Avatar

Deskripsi:
- Ubah avatar yang image nya di ambil dari storage wibu server
- Avatar forum
- Avatra job
- Avatar Investasi
- Avatar donasi
## No Issuee

src/app_modules/_global/component/comp_load_image.tsx

@@ -2,7 +2,7 @@
 
 import { APIs } from "@/app/lib";
 import { pathAssetImage } from "@/app/lib/path_asset_image";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+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";
@@ -67,7 +67,7 @@ export function ComponentGlobal_LoadImage({
         <Image
           onClick={() => {
             setIsLoading(true);
-            router.push(routerImagePreview.main({ id: fileId }), {
+            router.push(RouterImagePreview.main({ id: fileId }), {
               scroll: false,
             });
           }}

src/app_modules/_global/component/comp_load_image_landscape.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { APIs } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { RouterImagePreview } from "@/app/lib";
+import { Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentGlobal_LoadImageLandscape({
+  fileId,
+}: {
+  fileId: string;
+}) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setLoading] = 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 <Skeleton h={200} w={"100%"} />;
+
+  if (!isImage)
+    return (
+      <>
+        <Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
+          <Image
+            alt="No Image"
+            maw={150}
+            m={"auto"}
+            p={"xs"}
+            src={pathAssetImage.no_image}
+          />
+        </Center>
+      </>
+    );
+
+  return (
+    <>
+      <Center>
+        <Image
+          onClick={() => {
+            setLoading(true);
+            router.push(RouterImagePreview.main({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "1px",
+            borderRadius: "5px",
+          }}
+          radius={"4px"}
+          height={200}
+          alt="Image"
+          opacity={isLoading ? 0.5 : 1}
+          src={url}
+        />
+        {isLoading ? (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        ) : (
+          ""
+        )}
+      </Center>
+    </>
+  );
+}

src/app_modules/_global/component/comp_not_user_load_image.tsx

@@ -2,7 +2,7 @@
 
 import { APIs } from "@/app/lib";
 import { pathAssetImage } from "@/app/lib/path_asset_image";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+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";
@@ -62,7 +62,7 @@ export function ComponentGlobal_NotUserLoadImage({
         <Image
           onClick={() => {
             setIsLoading(true);
-            router.push(routerImagePreview.not_user_image({ id: fileId }), {
+            router.push(RouterImagePreview.not_user_image({ id: fileId }), {
               scroll: false,
             });
           }}

src/app_modules/_global/component/index.ts

@@ -6,6 +6,7 @@ import { ComponentGlobal_BoxUploadImage } from "./comp_box_upload_image";
 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_LoadImageLandscape } from "./comp_load_image_landscape";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import { ComponentGlobal_NotUserLoadImage } from "./comp_not_user_load_image";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
@@ -27,3 +28,4 @@ export { ComponentGlobal_ButtonUploadFileImage };
 export { ComponentGlobal_LoaderAvatar };
 export { ComponentGlobal_AvatarAndUsername };
 export { ComponentGlobal_NotUserLoadImage };
+export { ComponentGlobal_LoadImageLandscape };