create tamplate scroll
This commit is contained in:
17
src/app/zCoba/home/page.tsx
Normal file
17
src/app/zCoba/home/page.tsx
Normal file
@@ -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 (
|
||||
<>
|
||||
<Test_Tamplate
|
||||
header={<Test_LayoutHeaderTamplate title="Test scroll" />}
|
||||
// footer={<Test_FooterHome />}
|
||||
>
|
||||
<Test_Children />
|
||||
</Test_Tamplate>
|
||||
</>
|
||||
);
|
||||
}
|
||||
127
src/app/zCoba/home/test_children.tsx
Normal file
127
src/app/zCoba/home/test_children.tsx
Normal file
@@ -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 (
|
||||
<>
|
||||
<Box>
|
||||
<Image
|
||||
height={140}
|
||||
fit={"cover"}
|
||||
alt="logo"
|
||||
src={"/aset/home/home-hipmi-new.png"}
|
||||
styles={{
|
||||
imageWrapper: {
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
},
|
||||
image: {
|
||||
borderRadius: "8px 8px 8px 8px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{Array.from(new Array(2)).map((e, i) => (
|
||||
<Stack my={"sm"} key={i}>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
{listMenuHomeBody.map((e, i) => (
|
||||
<Paper
|
||||
key={e.id}
|
||||
h={150}
|
||||
bg={MainColor.darkblue}
|
||||
style={{
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
}}
|
||||
onClick={() => {}}
|
||||
>
|
||||
<Stack align="center" justify="center" h={"100%"}>
|
||||
<ActionIcon
|
||||
size={50}
|
||||
variant="transparent"
|
||||
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text
|
||||
c={e.link == "" ? "gray.3" : MainColor.white}
|
||||
fz={"xs"}
|
||||
>
|
||||
{e.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
{/* Job View */}
|
||||
<Paper
|
||||
p={"md"}
|
||||
w={"100%"}
|
||||
bg={MainColor.darkblue}
|
||||
style={{
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
}}
|
||||
>
|
||||
<Stack onClick={() => {}}>
|
||||
<Group>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
size={40}
|
||||
c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
|
||||
>
|
||||
{menuHomeJob.icon}
|
||||
</ActionIcon>
|
||||
<Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
|
||||
{menuHomeJob.name}
|
||||
</Text>
|
||||
</Group>
|
||||
<SimpleGrid cols={2} spacing="md">
|
||||
{Array.from({ length: 2 }).map((e, i) => (
|
||||
<Stack key={i}>
|
||||
<Group spacing={"xs"}>
|
||||
<Stack h={"100%"} align="center" justify="flex-start">
|
||||
<IconUserSearch size={20} color={MainColor.white} />
|
||||
</Stack>
|
||||
<Stack spacing={0} w={"60%"}>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
fz={"sm"}
|
||||
c={MainColor.yellow}
|
||||
fw={"bold"}
|
||||
>
|
||||
nama {i}
|
||||
</Text>
|
||||
<Text fz={"sm"} c={MainColor.white} lineClamp={2}>
|
||||
judulnya {i}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
75
src/app/zCoba/home/test_footer.tsx
Normal file
75
src/app/zCoba/home/test_footer.tsx
Normal file
@@ -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 (
|
||||
<Box
|
||||
style={{
|
||||
zIndex: 99,
|
||||
borderRadius: "20px 20px 0px 0px",
|
||||
}}
|
||||
w={"100%"}
|
||||
bottom={0}
|
||||
h={"9vh"}
|
||||
>
|
||||
<SimpleGrid cols={listMenuHomeFooter.length + 1}>
|
||||
{listMenuHomeFooter.map((e) => (
|
||||
<Center h={"9vh"} key={e.id}>
|
||||
<Stack
|
||||
align="center"
|
||||
spacing={0}
|
||||
onClick={() => {
|
||||
console.log("test")
|
||||
}}
|
||||
>
|
||||
<ActionIcon
|
||||
radius={"xl"}
|
||||
c={e.link === "" ? "gray" : MainColor.white}
|
||||
variant="transparent"
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
c={e.link === "" ? "gray" : MainColor.white}
|
||||
fz={12}
|
||||
>
|
||||
{e.name}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
))}
|
||||
|
||||
<Center h={"9vh"}>
|
||||
<Stack align="center" spacing={2}>
|
||||
<ActionIcon
|
||||
variant={"transparent"}
|
||||
onClick={() =>
|
||||
console.log("test")
|
||||
}
|
||||
>
|
||||
<IconUserCircle color="white" />
|
||||
</ActionIcon>
|
||||
<Text fz={10} c={MainColor.white}>
|
||||
Profile
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
130
src/app/zCoba/home/test_header.tsx
Normal file
130
src/app/zCoba/home/test_header.tsx
Normal file
@@ -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 (
|
||||
<>
|
||||
<Box
|
||||
h={"8vh"}
|
||||
// w={"100%"}
|
||||
// pos={"sticky"}
|
||||
// top={0}
|
||||
// style={{
|
||||
// zIndex: 10,
|
||||
// }}
|
||||
sx={{
|
||||
borderStyle: "none",
|
||||
}}
|
||||
bg={backgroundColor ? backgroundColor : MainColor.darkblue}
|
||||
>
|
||||
<Group 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
127
src/app/zCoba/home/test_tamplate.tsx
Normal file
127
src/app/zCoba/home/test_tamplate.tsx
Normal file
@@ -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 (
|
||||
<>
|
||||
<Box
|
||||
w={"100%"}
|
||||
h={"100%"}
|
||||
style={{
|
||||
backgroundColor: MainColor.black,
|
||||
}}
|
||||
>
|
||||
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.green}>
|
||||
{/* <BackgroundImage
|
||||
src={"/aset/global/main_background.png"}
|
||||
h={"100vh"}
|
||||
// style={{ position: "relative" }}
|
||||
> */}
|
||||
<TestHeader header={header} />
|
||||
|
||||
<TestChildren footer={footer}>{children}</TestChildren>
|
||||
|
||||
<TestFooter footer={footer} />
|
||||
{/* </BackgroundImage> */}
|
||||
</Container>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TestHeader({ header }: { header: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
h={"8vh"}
|
||||
style={{
|
||||
zIndex: 10,
|
||||
alignContent: "center",
|
||||
}}
|
||||
w={"100%"}
|
||||
pos={"sticky"}
|
||||
top={0}
|
||||
>
|
||||
{header}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TestChildren({
|
||||
children,
|
||||
footer,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
footer: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={{ zIndex: 0 }}
|
||||
px={"md"}
|
||||
h={footer ? "82vh" : "92vh"}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TestFooter({ 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>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user