website refactor

apps/website/templates/LeagueDetailTemplate.tsx

@@ -2,13 +2,13 @@
 
 import React from 'react';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { LeagueTabs } from '@/components/leagues/LeagueTabs';
+import { LeagueHeader } from '@/components/leagues/LeagueHeader';
+import { LeagueNavTabs } from '@/components/leagues/LeagueNavTabs';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
+import { Link } from '@/ui/Link';
+import { ChevronRight } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 
 interface Tab {
   label: string;
@@ -27,30 +27,38 @@ export function LeagueDetailTemplate({
   tabs,
   children,
 }: LeagueDetailTemplateProps) {
+  const pathname = usePathname();
+
   return (
-    <Container size="lg" py={6}>
-      <Stack gap={6}>
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Leagues', href: '/leagues' },
-            { label: viewData.name },
-          ]}
+    <Box minHeight="screen" bg="zinc-950" color="text-zinc-200">
+      <Box maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={8}>
+        {/* Breadcrumbs */}
+        <Box as="nav" display="flex" alignItems="center" gap={2} mb={8}>
+          <Link href="/" variant="ghost" size="xs" weight="medium">
+            <Text size="xs" weight="medium" uppercase letterSpacing="widest">Home</Text>
+          </Link>
+          <Box color="text-zinc-500"><ChevronRight size={12} /></Box>
+          <Link href="/leagues" variant="ghost" size="xs" weight="medium">
+            <Text size="xs" weight="medium" uppercase letterSpacing="widest">Leagues</Text>
+          </Link>
+          <Box color="text-zinc-500"><ChevronRight size={12} /></Box>
+          <Text size="xs" weight="medium" color="text-zinc-300" uppercase letterSpacing="widest">{viewData.name}</Text>
+        </Box>
+
+        <LeagueHeader
+          leagueId={viewData.leagueId}
+          leagueName={viewData.name}
+          description={viewData.description}
+          ownerId={viewData.ownerSummary?.driverId || ''}
+          ownerName={viewData.ownerSummary?.driverName || ''}
         />
 
-        <Box>
-          <Heading level={1}>{viewData.name}</Heading>
-          <Text color="text-gray-400" block mt={2}>
-            {viewData.description}
-          </Text>
-        </Box>
+        <LeagueNavTabs tabs={tabs} currentPathname={pathname} />
 
-        <LeagueTabs tabs={tabs} />
-
-        <Box>
+        <Box as="main">
           {children}
         </Box>
-      </Stack>
-    </Container>
+      </Box>
+    </Box>
   );
 }