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

fix layout donasi:

Browse Source 
- fix detail status galang dana
- fix detail donasi saya
This commit is contained in:
Bagasbanuna02
2025-03-18 12:03:55 +08:00
parent 2e3003fbe3
commit d5d17f2b75
9 changed files with 312 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app_modules/_global/ui/ui_header_tamplate.tsx
View File

@@ -50,7 +50,7 @@ export default function UIGlobal_LayoutHeaderTamplate({
<Box
h={"8vh"}
style={{
borderBottom: `1px solid ${AccentColor.blue}`,
borderBottom: `2px solid ${AccentColor.blue}`,
borderBottomLeftRadius: "10px",
borderBottomRightRadius: "10px",
}}

2
src/app_modules/_global/ui/ui_image_preview.tsx
View File

@@ -80,7 +80,7 @@ export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
}
/>
<Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"}>
<Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"} pt={"sm"}>
{isImage === null ? (
<Skeleton height={200} radius={"sm"} />
) : isImage ? (

187
src/app_modules/_global/ui/ui_new_image_preview.tsx Normal file
View File

@@ -0,0 +1,187 @@
"use client";
import { APIs } from "@/lib";
import { pathAssetImage } from "@/lib/path_asset_image";
import {
ActionIcon,
Box,
Center,
Container,
Image,
rem,
ScrollArea,
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 ComponentGlobal_Loader from "../component/loader";
import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
import { UIHeader } from "./ui_layout_tamplate";
import { Component_Header } from "../component/new/component_header";
import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "./V2_layout_tamplate";
export function UIGlobal_NewImagePreview({ fileId }: { fileId: string }) {
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const [isLoading, setIsLoading] = useState(false);
const url = APIs.GET({ fileId: fileId, size: "500" });
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 (
<>
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header
title="Preview Image"
hideButtonLeft
customButtonRight={
<ActionIcon
onClick={() => {
router.back(), setIsLoading(true);
}}
variant="transparent"
>
{isLoading ? (
<ComponentGlobal_Loader />
) : (
<IconX color={MainColor.yellow} />
)}
</ActionIcon>
}
/>
</UI_NewHeader>
<UI_NewChildren>
<Box
style={{ zIndex: 0 }}
h={"90vh"}
pos={"static"}
px={"lg"}
>
{isImage === null ? (
<Skeleton height={200} radius={"sm"} />
) : isImage ? (
<ScrollArea h={"100%"}>
<Center>
<Image alt="Image" src={url} maw={500} miw={200} />
</Center>
</ScrollArea>
) : (
<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>
</UI_NewChildren>
</UI_NewLayoutTamplate>
{/* <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(), setIsLoading(true);
}}
variant="transparent"
>
{isLoading ? (
<ComponentGlobal_Loader />
) : (
<IconX color={MainColor.yellow} />
)}
</ActionIcon>
}
/>
}
/>
<Box
style={{ zIndex: 0 }}
h={"90vh"}
pos={"static"}
px={"lg"}
pt={"sm"}
>
{isImage === null ? (
<Skeleton height={200} radius={"sm"} />
) : isImage ? (
<ScrollArea h={"100%"}>
<Center>
<Image alt="Image" src={url} maw={500} miw={200} />
</Center>
</ScrollArea>
) : (
<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> */}
</>
);
}