#fix: bug
- Desk: - Perbaikan penempatan file ## No issuee
This commit is contained in:
104
src/app_modules/_global/ui/ui_drawer.tsx
Normal file
104
src/app_modules/_global/ui/ui_drawer.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Drawer,
|
||||
Group,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { IconX } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { AccentColor } from "../color/color_pallet";
|
||||
import ComponentGlobal_Loader from "../component/loader";
|
||||
|
||||
interface MODEL_DRAWER {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
path: string;
|
||||
}
|
||||
export default function UIGlobal_Drawer({
|
||||
opened,
|
||||
close,
|
||||
component,
|
||||
}: {
|
||||
opened: boolean;
|
||||
close: () => void;
|
||||
component:
|
||||
| {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
path: string;
|
||||
}[]
|
||||
| any[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [pageId, setPageId] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
opened={opened}
|
||||
onClose={() => close()}
|
||||
position={"bottom"}
|
||||
size={"auto"}
|
||||
withCloseButton={false}
|
||||
styles={{
|
||||
content: {
|
||||
padding: 0,
|
||||
position: "absolute",
|
||||
margin: "auto",
|
||||
backgroundColor: "transparent",
|
||||
left: 0,
|
||||
right: 0,
|
||||
width: 500,
|
||||
},
|
||||
body: {
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
borderTop: `2px solid ${AccentColor.blue}`,
|
||||
borderRight: `1px solid ${AccentColor.blue}`,
|
||||
borderLeft: `1px solid ${AccentColor.blue}`,
|
||||
borderRadius: "20px 20px 0px 0px",
|
||||
color: "white",
|
||||
paddingBottom: "5%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack spacing={"xs"}>
|
||||
<Group position="right">
|
||||
<ActionIcon onClick={close} variant="transparent">
|
||||
<IconX color="white" />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
<SimpleGrid cols={component.length < 4 ? component.length : 4}>
|
||||
{component.map((e, i) => (
|
||||
<Stack key={i} align="center" spacing={"xs"}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c="white"
|
||||
onClick={() => {
|
||||
setPageId(e?.id);
|
||||
setIsLoading(true);
|
||||
router.push(e?.path);
|
||||
}}
|
||||
>
|
||||
{isLoading && e?.id === pageId ? (
|
||||
<ComponentGlobal_Loader />
|
||||
) : (
|
||||
e?.icon
|
||||
)}
|
||||
</ActionIcon>
|
||||
<Text align="center" color="white">
|
||||
{e?.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
114
src/app_modules/_global/ui/ui_header_tamplate.tsx
Normal file
114
src/app_modules/_global/ui/ui_header_tamplate.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Header,
|
||||
Group,
|
||||
ActionIcon,
|
||||
Text,
|
||||
Title,
|
||||
Box,
|
||||
Loader,
|
||||
} from "@mantine/core";
|
||||
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
import { AccentColor, MainColor } from "../color/color_pallet";
|
||||
|
||||
export default function UIGlobal_LayoutHeaderTamplate({
|
||||
title,
|
||||
posotion,
|
||||
// left button
|
||||
hideButtonLeft,
|
||||
iconLeft,
|
||||
routerLeft,
|
||||
customButtonLeft,
|
||||
// right button
|
||||
iconRight,
|
||||
routerRight,
|
||||
customButtonRight,
|
||||
}: {
|
||||
title: string;
|
||||
posotion?: any;
|
||||
// left button
|
||||
hideButtonLeft?: boolean;
|
||||
iconLeft?: any;
|
||||
routerLeft?: any;
|
||||
customButtonLeft?: React.ReactNode;
|
||||
// right button
|
||||
iconRight?: any;
|
||||
routerRight?: any;
|
||||
customButtonRight?: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isRightLoading, setRightLoading] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
height={"8vh"}
|
||||
sx={{
|
||||
// borderRadius: "0px 0px 20px 20px",
|
||||
// borderBottom: `1px solid ${AccentColor.blue}`,
|
||||
borderStyle: "none",
|
||||
}}
|
||||
bg={MainColor.darkblue}
|
||||
>
|
||||
<Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
|
||||
{hideButtonLeft ? (
|
||||
<ActionIcon disabled variant="transparent"></ActionIcon>
|
||||
) : customButtonLeft ? (
|
||||
customButtonLeft
|
||||
) : (
|
||||
<ActionIcon
|
||||
c={"white"}
|
||||
variant="transparent"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsLoading(true);
|
||||
routerLeft === undefined
|
||||
? router.back()
|
||||
: router.push(routerLeft, { scroll: false });
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader color={AccentColor.yellow} size={20} />
|
||||
) : 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>
|
||||
</Header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
126
src/app_modules/_global/ui/ui_layout_tamplate.tsx
Normal file
126
src/app_modules/_global/ui/ui_layout_tamplate.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
BackgroundImage,
|
||||
Box,
|
||||
Container,
|
||||
Footer,
|
||||
rem,
|
||||
ScrollArea,
|
||||
} from "@mantine/core";
|
||||
import { AccentColor, MainColor } from "../color/color_pallet";
|
||||
import React from "react";
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function UIHeader({ header }: { header: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
{header ? (
|
||||
<Box
|
||||
h={"8vh"}
|
||||
style={{
|
||||
zIndex: 10,
|
||||
}}
|
||||
w={"100%"}
|
||||
pos={"sticky"}
|
||||
top={0}
|
||||
>
|
||||
{header}
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
style={{
|
||||
position: "relative",
|
||||
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}`,
|
||||
}}
|
||||
bg={AccentColor.darkblue}
|
||||
>
|
||||
<Box
|
||||
h={"100%"}
|
||||
style={{
|
||||
borderRadius: "20px 20px 0px 0px",
|
||||
width: "100%",
|
||||
}}
|
||||
pos={"absolute"}
|
||||
>
|
||||
{footer}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
45
src/app_modules/_global/ui/ui_modal.tsx
Normal file
45
src/app_modules/_global/ui/ui_modal.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Modal, Stack, Title, Group, Button, Box } from "@mantine/core";
|
||||
import { MainColor, AccentColor } from "../color/color_pallet";
|
||||
|
||||
export default function UIGlobal_Modal({
|
||||
opened,
|
||||
close,
|
||||
title,
|
||||
buttonKiri,
|
||||
buttonKanan,
|
||||
}: {
|
||||
opened: any;
|
||||
close: any;
|
||||
title: any;
|
||||
buttonKiri: any;
|
||||
buttonKanan: any;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={() => {
|
||||
close();
|
||||
}}
|
||||
centered
|
||||
withCloseButton={false}
|
||||
styles={{
|
||||
content: {
|
||||
backgroundColor: MainColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<Title order={6} color="white" align="center">
|
||||
{title}
|
||||
</Title>
|
||||
<Group position="center">
|
||||
<Box>{buttonKiri}</Box>
|
||||
<Box>{buttonKanan}</Box>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
19
src/app_modules/_global/ui/ui_splash.tsx
Normal file
19
src/app_modules/_global/ui/ui_splash.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { Loader, Stack, ThemeIcon } from "@mantine/core";
|
||||
import UIGlobal_LayoutTamplate from "./ui_layout_tamplate";
|
||||
|
||||
export default function UIGlobal_SplashScreen({ icon }: { icon: any }) {
|
||||
return (
|
||||
<>
|
||||
<UIGlobal_LayoutTamplate>
|
||||
<Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
|
||||
<ThemeIcon variant="transparent" size={300} c="white">
|
||||
{icon}
|
||||
</ThemeIcon>
|
||||
<Loader variant="dots" color="white" />
|
||||
</Stack>
|
||||
</UIGlobal_LayoutTamplate>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user