website refactor

apps/website/templates/LeagueDetailTemplate.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { usePathname } from 'next/navigation';
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
@@ -13,6 +14,8 @@ import { ChevronRight } from 'lucide-react';
 import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
 
 export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps<LeagueDetailViewData> & { children?: React.ReactNode, tabs?: any[] }) {
+  const pathname = usePathname();
+
   return (
     <Container size="lg">
       <Box paddingY={8}>
@@ -26,8 +29,43 @@ export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps
               <Text size="sm" color="text-white">{viewData.name}</Text>
             </Stack>
           </Box>
-          {children}
-          {/* ... rest of the template ... */}
+
+          {/* Tabs */}
+          {tabs && tabs.length > 0 && (
+            <Box borderBottom borderColor="zinc-800">
+              <Box display="flex" gap={8}>
+                {tabs.map((tab) => {
+                  const isActive = tab.exact 
+                    ? pathname === tab.href 
+                    : pathname.startsWith(tab.href);
+                  
+                  return (
+                    <Link key={tab.href} href={tab.href}>
+                      <Box 
+                        pb={4} 
+                        borderBottom={isActive} 
+                        borderWidth={isActive ? 2 : 0}
+                        borderColor={isActive ? "blue-500" : "transparent"}
+                      >
+                        <Text 
+                          size="sm" 
+                          weight={isActive ? "bold" : "medium"} 
+                          color={isActive ? "text-white" : "text-zinc-500"}
+                          className="transition-colors hover:text-white"
+                        >
+                          {tab.label}
+                        </Text>
+                      </Box>
+                    </Link>
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+
+          <Box>
+            {children}
+          </Box>
         </Stack>
       </Box>
     </Container>