create tamplate scroll

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 (
+    <>
+      <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>
+    </>
+  );
+}