fix

Deskripsi:
- Upload foto profil ke storage
- Upload background profile ke storge
## No Issue

src/app_modules/_global/button/comp_button_upload_photo.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button, FileButton } from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import { MainColor } from "../color";
+
+export function ComponentGlobal_ButtonUploadFileImage({
+  onSetFile,
+  onSetImage,
+}: {
+  onSetFile: File | any;
+  onSetImage: any | null;
+}) {
+  return (
+    <FileButton
+      onChange={async (files: any | null) => {
+        try {
+          const buffer = URL.createObjectURL(
+            new Blob([new Uint8Array(await files.arrayBuffer())])
+          );
+
+          onSetFile(files);
+          onSetImage(buffer);
+        } catch (error) {
+          console.log(error);
+        }
+      }}
+      accept="image/png,image/jpeg"
+    >
+      {(props) => (
+        <Button
+          {...props}
+          radius={"xl"}
+          leftIcon={<IconCamera />}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+        >
+          Upload
+        </Button>
+      )}
+    </FileButton>
+  );
+}

src/app_modules/_global/component/comp_box_upload_image.tsx

@@ -1,14 +1,28 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { Box } from "@mantine/core";
 
+/**
+ * 
+ * @param  children
+ * @tutorial | 
+<AspectRatio ratio={1 / 1}  mt={5} maw={300} mx={"auto"} >
+<Image
+style={{ maxHeight: 250 }}
+alt="Avatar"
+src={image ? image : APIs.GET({ fileId: profile.imageId as any })}/>
+</AspectRatio> 
+ * @returns folllow like this
+ */
 export function ComponentGlobal_BoxUploadImage({
   children,
+  height,
 }: {
   children: React.ReactNode;
+  height?: number;
 }) {
   return (
     <>
-      <ComponentGlobal_CardStyles height={300}>
+      <ComponentGlobal_CardStyles height={height ? height : 300}>
         <Box
           style={{
             height: "100%",

src/app_modules/_global/component/comp_load_image.tsx

@@ -5,14 +5,17 @@ import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import ComponentGlobal_Loader from "./loader";
 
+type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_LoadImage({
   url,
   maw,
   h,
+  radius,
 }: {
   url: string;
-  maw?: number;
+  maw?: number | string;
   h?: number;
+  radius?: IRadius;
 }) {
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
@@ -34,7 +37,7 @@ export function ComponentGlobal_LoadImage({
 
   if (isImage === null)
     return (
-      <Center h={h ? h : 250}>
+      <Center h={250}>
         <ComponentGlobal_Loader variant="dots" size={50} />
       </Center>
     );
@@ -42,7 +45,7 @@ export function ComponentGlobal_LoadImage({
   if (!isImage)
     return (
       <>
-        <Center h={250}>
+        <Center h={250} >
           <Image
             alt="No Image"
             maw={150}
@@ -56,24 +59,18 @@ export function ComponentGlobal_LoadImage({
 
   return (
     <>
-      {h ? (
-        <Image
-          height={h}
-          alt="Image"
-          maw={maw ? maw : 200}
-          m={"auto"}
-          p={"xs"}
-          src={url}
-        />
-      ) : (
-        <Image
-          alt="Image"
-          maw={maw ? maw : 200}
-          m={"auto"}
-          p={"xs"}
-          src={url}
-        />
-      )}
+      <Box h={h ? h : 250}>
+        <Center h={"100%"}>
+          <Image
+            radius={radius ? radius : 0}
+            alt="Image"
+            maw={maw ? maw : 200}
+            m={"auto"}
+            p={"xs"}
+            src={url}
+          />
+        </Center>
+      </Box>
     </>
   );
 }

src/app_modules/_global/component/index.ts

@@ -1,3 +1,4 @@
+import { ComponentGlobal_ButtonUploadFileImage } from "../button/comp_button_upload_photo";
 import ComponentGlobal_BoxInformation from "./box_information";
 import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
 import { ComponentGlobal_BoxUploadImage } from "./comp_box_upload_image";
@@ -6,6 +7,7 @@ import { ComponentGlobal_LoadImage } from "./comp_load_image";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
+import ComponentGlobal_ErrorInput from "./error_input";
 import ComponentGlobal_InputCountDown from "./input_countdown";
 
 export { ComponentGlobal_TampilanRupiah };
@@ -17,3 +19,5 @@ export { ComponentGlobal_InputCountDown };
 export { ComponentGlobal_CardStyles };
 export { ComponentGlobal_BoxUploadImage };
 export { ComponentGlobal_LoadImage };
+export { ComponentGlobal_ErrorInput };
+export { ComponentGlobal_ButtonUploadFileImage };