133 lines
2.8 KiB
TypeScript
133 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
BackgroundImage,
|
|
Box,
|
|
Container,
|
|
rem,
|
|
ScrollArea
|
|
} from "@mantine/core";
|
|
import React from "react";
|
|
import { AccentColor, MainColor } from "../color/color_pallet";
|
|
|
|
export default function UIGlobal_LayoutTamplate({
|
|
children,
|
|
header,
|
|
footer,
|
|
}: {
|
|
children: React.ReactNode;
|
|
header?: React.ReactNode;
|
|
footer?: 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" }}
|
|
>
|
|
<UIHeader header={header} />
|
|
|
|
<UIChildren footer={footer}>{children}</UIChildren>
|
|
|
|
<UIFooter footer={footer} />
|
|
</BackgroundImage>
|
|
</Container>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function UIHeader({ header }: { header: React.ReactNode }) {
|
|
return (
|
|
<>
|
|
{header ? (
|
|
<Box
|
|
h={"8vh"}
|
|
style={{
|
|
zIndex: 10,
|
|
}}
|
|
w={"100%"}
|
|
pos={"sticky"}
|
|
top={0}
|
|
>
|
|
{header}
|
|
</Box>
|
|
) : (
|
|
""
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function UIChildren({
|
|
children,
|
|
footer,
|
|
}: {
|
|
children: React.ReactNode;
|
|
footer: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<>
|
|
<Box style={{ zIndex: 0 }} h={footer ? "82vh" : "92vh"} pos={"static"}>
|
|
<ScrollArea h={"100%"} px={"md"}>
|
|
{children}
|
|
</ScrollArea>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function UIFooter({ footer }: { footer: React.ReactNode }) {
|
|
return (
|
|
<>
|
|
{footer ? (
|
|
<Box
|
|
// w dihilangkan kalau relative
|
|
w={"100%"}
|
|
style={{
|
|
// position: "relative",
|
|
position: "fixed",
|
|
bottom: 0,
|
|
height: "10vh",
|
|
zIndex: 10,
|
|
borderRadius: "20px 20px 0px 0px",
|
|
borderTop: `2px solid ${AccentColor.blue}`,
|
|
borderRight: `1px solid ${AccentColor.blue}`,
|
|
borderLeft: `1px solid ${AccentColor.blue}`,
|
|
// maxWidth dihilangkan kalau relative
|
|
maxWidth: rem(500),
|
|
}}
|
|
bg={AccentColor.darkblue}
|
|
>
|
|
<Box
|
|
h={"100%"}
|
|
// maw dihilangkan kalau relative
|
|
maw={rem(500)}
|
|
style={{
|
|
borderRadius: "20px 20px 0px 0px",
|
|
width: "100%",
|
|
}}
|
|
// pos={"absolute"}
|
|
>
|
|
{footer}
|
|
</Box>
|
|
</Box>
|
|
) : (
|
|
""
|
|
)}
|
|
</>
|
|
);
|
|
}
|