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

fix tamplate ui

Browse Source
This commit is contained in:
Bagasbanuna02
2025-03-06 15:07:49 +08:00
parent 854040ebfa
commit 6a733d89cc
13 changed files with 852 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app_modules/_global/ui/new_ui_content.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { Box } from "@mantine/core";
export function NewUI_Content({ children }: { children: React.ReactNode }) {
return (
<>
<Box
style={{
position: "fixed",
top: "8vh", // Mulai di bawah header
bottom: "10vh", // Berakhir di atas footer
left: 0,
right: 0,
overflowY: "auto", // Bisa di-scroll
padding: "16px",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
{children}
</Box>
</>
);
}

28
src/app_modules/_global/ui/new_ui_footer.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { Box } from "@mantine/core";
import { AccentColor } from "../color";
export function NewUI_Footer({ children }: { children: React.ReactNode }) {
return (
<>
<Box
style={{
position: "fixed",
bottom: 0,
left: 0,
right: 0,
height: "10vh",
zIndex: 100,
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
{children}
</Box>
</>
);
}

123
src/app_modules/_global/ui/new_ui_header.tsx Normal file
View File

@@ -0,0 +1,123 @@
import { ActionIcon, Box, Group, Title, Loader } from "@mantine/core";
import { AccentColor, MainColor } from "../color";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { IconChevronLeft } from "@tabler/icons-react";
export function NewUI_Header({
title,
posotion,
// left button
hideButtonLeft,
iconLeft,
routerLeft,
customButtonLeft,
// right button
iconRight,
routerRight,
customButtonRight,
backgroundColor,
}: {
title: string;
posotion?: any;
// left button
hideButtonLeft?: boolean;
iconLeft?: any;
routerLeft?: any;
customButtonLeft?: React.ReactNode;
// right button
iconRight?: any;
routerRight?: any;
customButtonRight?: React.ReactNode;
backgroundColor?: string;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [isRightLoading, setRightLoading] = useState(false);
return (
<>
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
height: "8vh",
zIndex: 100,
backgroundColor: MainColor.darkblue,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
// padding: "0",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
}}
>
<Group
w={"100%"}
h={"100%"}
position={posotion ? posotion : "apart"}
px={"md"}
>
{hideButtonLeft ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : customButtonLeft ? (
customButtonLeft
) : (
<ActionIcon
c={MainColor.white}
variant="transparent"
radius={"xl"}
onClick={() => {
setIsLoading(true);
routerLeft === undefined
? router.back()
: router.push(routerLeft, { scroll: false });
}}
>
{/* PAKE LOADING SAAT KLIK BACK */}
{/* {isLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : iconLeft ? (
iconLeft
) : (
<IconChevronLeft />
)} */}
{/* GA PAKE LOADING SAAT KLIK BACK */}
{iconLeft ? iconLeft : <IconChevronLeft />}
</ActionIcon>
)}
<Title order={5} c={MainColor.yellow}>
{title}
</Title>
{customButtonRight ? (
customButtonRight
) : iconRight === undefined ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : routerRight === undefined ? (
<Box>{iconRight}</Box>
) : (
<ActionIcon
c={"white"}
variant="transparent"
onClick={() => {
setRightLoading(true);
router.push(routerRight);
}}
>
{isRightLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : (
iconRight
)}
</ActionIcon>
)}
</Group>
</Box>
</>
);
}

39
src/app_modules/_global/ui/new_ui_tamplate.tsx Normal file
View File

@@ -0,0 +1,39 @@
"use client";
import { BackgroundImage, Box } from "@mantine/core";
import { MainColor } from "../color";
export function NewUI_Tamplate({ children }: { children: React.ReactNode }) {
return (
<Box
style={{
width: "100%",
height: "100vh",
overflow: "hidden",
backgroundColor: MainColor.black,
position: "relative",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto", // Pusatkan di tengah layar desktop
border: "1px solid #ccc", // Garis tepi untuk visualisasi
}}
>
<Box
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1, // Pastikan background di belakang konten
backgroundImage: "url(/aset/global/main_background.png)",
backgroundSize: "cover",
backgroundPosition: "center",
maxWidth: "500px", // Batasi lebar maksimum untuk tampilan mobile
margin: "0 auto",
}}
>
{children}
</Box>
</Box>
);
}