wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Avatar

Browse Source 
Deskripsi:
- Avatar job
- Avatar collaboration
- Avatar event
## No Issuue
This commit is contained in:
Bagasbanuna02
2024-10-01 16:31:12 +08:00
parent ca5c30499a
commit 284787243b
110 changed files with 1122 additions and 2064 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app_modules/_global/component/comp_avatar_and_username.tsx
View File

@@ -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>

4
src/app_modules/_global/component/comp_card_box_and_background.tsx
View File

@@ -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}
>

11
src/app_modules/_global/component/comp_load_image.tsx
View File

@@ -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({

93
src/app_modules/_global/component/comp_not_user_load_image.tsx Normal file
View File

@@ -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>
</>
);
}

2
src/app_modules/_global/component/index.ts
View File

@@ -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 };

4
src/app_modules/_global/ui/index.ts
View File

@@ -1,8 +1,10 @@
import UIGlobal_Drawer from "./ui_drawer";
import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
import { UIGlobal_ImagePreview } from "./ui_image_preview";
import UIGlobal_LayoutDefault from "./ui_layout_default";
import UIGlobal_LayoutTamplate from "./ui_layout_tamplate";
import UIGlobal_Modal from "./ui_modal";
import { UIGlobal_NotUserImagePreview } from "./ui_not_user_image_preview";
import UIGlobal_SplashScreen from "./ui_splash";
export { UIGlobal_LayoutTamplate };
@@ -11,3 +13,5 @@ export { UIGlobal_Drawer };
export { UIGlobal_Modal };
export { UIGlobal_SplashScreen };
export { UIGlobal_ImagePreview };
export { UIGlobal_NotUserImagePreview };
export { UIGlobal_LayoutDefault };

45
src/app_modules/_global/ui/ui_layout_default.tsx Normal file
View File

@@ -0,0 +1,45 @@
"use client";
import {
BackgroundImage,
Box,
Container,
rem,
ScrollArea,
} from "@mantine/core";
import { MainColor } from "../color";
export default function UIGlobal_LayoutDefault({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Box
w={"100%"}
h={"100%"}
style={{
overflowY: "auto",
overflowX: "auto",
backgroundColor: MainColor.black,
position: "fixed",
}}
>
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
<BackgroundImage
src={"/aset/global/main_background.png"}
h={"100vh"}
style={{ position: "relative" }}
>
<Box style={{ zIndex: 0 }} h={"100vh"} pos={"static"}>
<ScrollArea h={"100%"} px={"md"}>
{children}
</ScrollArea>
</Box>
</BackgroundImage>
</Container>
</Box>
</>
);
}

5
src/app_modules/_global/ui/ui_layout_tamplate.tsx
View File

@@ -4,12 +4,11 @@ import {
BackgroundImage,
Box,
Container,
Footer,
rem,
ScrollArea,
ScrollArea
} from "@mantine/core";
import { AccentColor, MainColor } from "../color/color_pallet";
import React from "react";
import { AccentColor, MainColor } from "../color/color_pallet";
export default function UIGlobal_LayoutTamplate({
children,

107
src/app_modules/_global/ui/ui_not_user_image_preview.tsx Normal file
View File

@@ -0,0 +1,107 @@
"use client";
import { APIs } from "@/app/lib";
import { pathAssetImage } from "@/app/lib/path_asset_image";
import {
ActionIcon,
Box,
Center,
Container,
Image,
rem,
Skeleton
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MainColor } from "../color";
import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
import { UIHeader } from "./ui_layout_tamplate";
export function UIGlobal_NotUserImagePreview({ fileId }: { fileId: string }) {
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const url = APIs.GET({ fileId: fileId });
useShallowEffect(() => {
onLoadImage();
}, []);
async function onLoadImage() {
const res = await fetch(url);
try {
if (res.ok) {
return setIsImage(true);
}
setIsImage(false);
} catch (error) {
console.log(error);
}
}
return (
<>
<Box
w={"100%"}
h={"100%"}
style={{
overflowY: "auto",
overflowX: "auto",
backgroundColor: MainColor.black,
position: "fixed",
}}
>
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
<UIHeader
header={
<UIGlobal_LayoutHeaderTamplate
title="Preview Image"
hideButtonLeft
customButtonRight={
<ActionIcon
onClick={() => router.back()}
variant="transparent"
>
<IconX color={MainColor.yellow} />
</ActionIcon>
}
/>
}
/>
<Box style={{ zIndex: 0 }} h={"92vh"} pos={"static"} px={"lg"}>
{isImage === null ? (
<Skeleton height={200} radius={"sm"} />
) : isImage ? (
<Center>
<Image alt="Image" src={url} maw={400} miw={200} />
</Center>
) : (
<Box
bg={"gray"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "0.5px",
borderRadius: "5px",
height: 300,
}}
>
<Center h={"100%"}>
<Image
alt="Image"
height={100}
width={100}
src={pathAssetImage.no_image}
/>
</Center>
</Box>
)}
</Box>
</Container>
</Box>
</>
);
}