settings link, uneroll team server fn

src/features/core/components/header.tsx

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

src/features/core/components/settings-button.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mantine/core"
+import { GearIcon } from "@phosphor-icons/react"
+import { useNavigate } from "@tanstack/react-router"
+
+interface SettingButtonProps {
+  offsetY: number;
+  to: string;
+}
+
+const SettingsButton = ({ offsetY, to }: SettingButtonProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <Box
+      style={{ cursor: 'pointer', zIndex: 1000, transform: `translateY(-${offsetY}px)` }}
+      onClick={() => navigate({ to })}
+      pos='absolute'
+      right={{ base: 0, sm: 100, md: 200, lg: 300 }}
+      m={20}
+    >
+      <GearIcon weight='bold' size={20} />
+    </Box>
+  );
+}
+
+export default SettingsButton;

src/features/core/types/header-config.ts

@@ -2,6 +2,7 @@ interface HeaderConfig {
   title?: string;
   withBackButton?: boolean;
   collapsed?: boolean;
+  settingsLink?: string;
 }
 
 export type { HeaderConfig };