create tamplate scroll

2025-03-06 10:14:03 +08:00
parent f1175b77d4
commit 307e61c567
5 changed files with 476 additions and 0 deletions
--- a/src/app/zCoba/home/test_tamplate.tsx
+++ 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 (
+    <>
+      <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>
+      ) : (
+        ""
+      )}
+    </>
+  );
+}