website refactor

apps/website/templates/LeagueDetailTemplate.tsx

@@ -1,8 +1,14 @@
-import { Section } from '@/ui/Section';
-import { Layout } from '@/ui/Layout';
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Link } from '@/ui/Link';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import { LeagueTabs } from '@/components/leagues/LeagueTabs';
+import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
 
 interface Tab {
   label: string;
@@ -11,58 +17,40 @@ interface Tab {
 }
 
 interface LeagueDetailTemplateProps {
-  leagueId: string;
-  leagueName: string;
-  leagueDescription: string;
+  viewData: LeagueDetailViewData;
   tabs: Tab[];
   children: React.ReactNode;
 }
 
 export function LeagueDetailTemplate({
-  leagueId,
-  leagueName,
-  leagueDescription,
+  viewData,
   tabs,
   children,
 }: LeagueDetailTemplateProps) {
   return (
-    <Layout>
-      <Section>
+    <Container size="lg" py={6}>
+      <Stack gap={6}>
         <Breadcrumbs
           items={[
             { label: 'Home', href: '/' },
             { label: 'Leagues', href: '/leagues' },
-            { label: leagueName },
+            { label: viewData.name },
           ]}
         />
 
-        <Section>
-          <Text size="3xl" weight="bold" className="text-white">
-            {leagueName}
+        <Box>
+          <Heading level={1}>{viewData.name}</Heading>
+          <Text color="text-gray-400" block mt={2}>
+            {viewData.description}
           </Text>
-          <Text size="base" className="text-gray-400 mt-2">
-            {leagueDescription}
-          </Text>
-        </Section>
+        </Box>
 
-        <Section>
-          <div className="flex gap-6 overflow-x-auto">
-            {tabs.map((tab) => (
-              <Link
-                key={tab.href}
-                href={tab.href}
-                className="pb-3 px-1 font-medium whitespace-nowrap transition-colors text-gray-400 hover:text-white"
-              >
-                {tab.label}
-              </Link>
-            ))}
-          </div>
-        </Section>
+        <LeagueTabs tabs={tabs} />
 
-        <Section>
+        <Box>
           {children}
-        </Section>
-      </Section>
-    </Layout>
+        </Box>
+      </Stack>
+    </Container>
   );
-}
+}