128 lines
3.8 KiB
TypeScript
128 lines
3.8 KiB
TypeScript
"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>
|
|
</>
|
|
);
|
|
}
|