init

src/features/core/components/header.tsx

@@ -0,0 +1,26 @@
+import { Title, AppShell, Flex } from "@mantine/core";
+import { HeaderConfig } from "../types/header-config";
+import BackButton from "./back-button";
+import { useMemo } from "react";
+interface HeaderProps extends HeaderConfig {
+  scrollPosition: { x: number, y: number };
+}
+
+const Header = ({ withBackButton, collapsed, title, scrollPosition }: HeaderProps) => {
+  const offsetY = useMemo(() => {
+    return collapsed ? scrollPosition.y : 0;
+  }, [collapsed, scrollPosition.y]);
+
+  return (
+    <>
+      {withBackButton && <BackButton offsetY={offsetY} />}
+      <AppShell.Header id='app-header' display={collapsed ? 'none' : 'block'}>
+        <Flex justify='center' align='center' h='100%' px='md'>
+          <Title order={2}>{title}</Title>
+        </Flex>
+      </AppShell.Header>
+    </>
+  );
+}
+
+export default Header;