website refactor

apps/website/components/leagues/LeagueNavTabs.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Link } from '@/ui/Link';
+
+interface Tab {
+  label: string;
+  href: string;
+  exact?: boolean;
+}
+
+interface LeagueNavTabsProps {
+  tabs: Tab[];
+  currentPathname: string;
+}
+
+export function LeagueNavTabs({ tabs, currentPathname }: LeagueNavTabsProps) {
+  return (
+    <Box as="nav" borderBottom borderColor="zinc-800" mb={6}>
+      <Stack as="ul" direction="row" gap={8} overflow="auto" hideScrollbar>
+        {tabs.map((tab) => {
+          const isActive = tab.exact 
+            ? currentPathname === tab.href 
+            : currentPathname.startsWith(tab.href);
+
+          return (
+            <Box as="li" key={tab.href} position="relative">
+              <Link
+                href={tab.href}
+                variant="ghost"
+                pb={4}
+                display="block"
+                size="sm"
+                weight="medium"
+                color={isActive ? 'text-blue-500' : 'text-zinc-400'}
+                hoverTextColor={isActive ? 'text-blue-500' : 'text-zinc-200'}
+                transition
+              >
+                {tab.label}
+              </Link>
+              {isActive && (
+                <Box 
+                  position="absolute" 
+                  bottom="0" 
+                  left="0" 
+                  right="0" 
+                  h="0.5" 
+                  bg="bg-blue-500" 
+                />
+              )}
+            </Box>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+}