diff --git a/src/app/zCoba/home/page.tsx b/src/app/zCoba/home/page.tsx new file mode 100644 index 00000000..a8556b36 --- /dev/null +++ b/src/app/zCoba/home/page.tsx @@ -0,0 +1,17 @@ +import { Test_Children } from "./test_children"; +import Test_FooterHome from "./test_footer"; +import Test_LayoutHeaderTamplate from "./test_header"; +import { Test_Tamplate } from "./test_tamplate"; + +export default async function Page() { + return ( + <> + } + // footer={} + > + + + + ); +} diff --git a/src/app/zCoba/home/test_children.tsx b/src/app/zCoba/home/test_children.tsx new file mode 100644 index 00000000..e3a96278 --- /dev/null +++ b/src/app/zCoba/home/test_children.tsx @@ -0,0 +1,127 @@ +"use client"; + +import { AccentColor, MainColor } from "@/app_modules/_global/color"; +import { + listMenuHomeBody, + menuHomeJob, +} from "@/app_modules/home/component/list_menu_home"; +import { + ActionIcon, + Box, + Group, + Image, + Paper, + SimpleGrid, + Stack, + Text +} from "@mantine/core"; +import { IconUserSearch } from "@tabler/icons-react"; + +export function Test_Children() { + return ( + <> + + logo + + {Array.from(new Array(2)).map((e, i) => ( + + + {listMenuHomeBody.map((e, i) => ( + {}} + > + + + {e.icon} + + + {e.name} + + + + ))} + + + {/* Job View */} + + {}}> + + + {menuHomeJob.icon} + + + {menuHomeJob.name} + + + + {Array.from({ length: 2 }).map((e, i) => ( + + + + + + + + nama {i} + + + judulnya {i} + + + + + ))} + + + + + ))} + + + ); +} diff --git a/src/app/zCoba/home/test_footer.tsx b/src/app/zCoba/home/test_footer.tsx new file mode 100644 index 00000000..baa2368a --- /dev/null +++ b/src/app/zCoba/home/test_footer.tsx @@ -0,0 +1,75 @@ +"use client" + +import { MainColor } from "@/app_modules/_global/color"; +import { listMenuHomeFooter } from "@/app_modules/home"; +import { + ActionIcon, + Box, + Center, + SimpleGrid, + Stack, + Text, +} from "@mantine/core"; +import { IconUserCircle } from "@tabler/icons-react"; +import { useRouter } from "next/navigation"; + +export default function Test_FooterHome() { + const router = useRouter(); + + return ( + + + {listMenuHomeFooter.map((e) => ( +
+ { + console.log("test") + }} + > + + {e.icon} + + + {e.name} + + +
+ ))} + +
+ + + console.log("test") + } + > + + + + Profile + + +
+ + + ); +} diff --git a/src/app/zCoba/home/test_header.tsx b/src/app/zCoba/home/test_header.tsx new file mode 100644 index 00000000..df65017a --- /dev/null +++ b/src/app/zCoba/home/test_header.tsx @@ -0,0 +1,130 @@ +"use client"; + +import { AccentColor, MainColor } from "@/app_modules/_global/color"; +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"; + + +export default function Test_LayoutHeaderTamplate({ + 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 ( + <> + + + {hideButtonLeft ? ( + + ) : customButtonLeft ? ( + customButtonLeft + ) : ( + { + setIsLoading(true); + routerLeft === undefined + ? router.back() + : router.push(routerLeft, { scroll: false }); + }} + > + {/* PAKE LOADING SAAT KLIK BACK */} + {/* {isLoading ? ( + + ) : iconLeft ? ( + iconLeft + ) : ( + + )} */} + + + {/* GA PAKE LOADING SAAT KLIK BACK */} + {iconLeft ? ( + iconLeft + ) : ( + + )} + + )} + + + {title} + + + {customButtonRight ? ( + customButtonRight + ) : iconRight === undefined ? ( + + ) : routerRight === undefined ? ( + {iconRight} + ) : ( + { + setRightLoading(true); + router.push(routerRight); + }} + > + {isRightLoading ? ( + + ) : ( + iconRight + )} + + )} + + + + ); +} diff --git a/src/app/zCoba/home/test_tamplate.tsx b/src/app/zCoba/home/test_tamplate.tsx new file mode 100644 index 00000000..ff55f50a --- /dev/null +++ b/src/app/zCoba/home/test_tamplate.tsx @@ -0,0 +1,127 @@ +"use client"; + +import { AccentColor, MainColor } from "@/app_modules/_global/color"; +import { + BackgroundImage, + Box, + Container, + rem, + ScrollArea, +} from "@mantine/core"; + +export function Test_Tamplate({ + children, + header, + footer, +}: { + children: React.ReactNode; + header: React.ReactNode; + footer?: React.ReactNode; +}) { + return ( + <> + + + {/* */} + + + {children} + + + {/* */} + + + + ); +} + +export function TestHeader({ header }: { header: React.ReactNode }) { + return ( + <> + + {header} + + + ); +} + +export function TestChildren({ + children, + footer, +}: { + children: React.ReactNode; + footer: React.ReactNode; +}) { + return ( + <> + + {children} + + + ); +} + +function TestFooter({ footer }: { footer: React.ReactNode }) { + return ( + <> + {footer ? ( + + + {footer} + + + ) : ( + "" + )} + + ); +}