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