website refactor

apps/website/templates/LeagueStandingsTemplate.tsx

@@ -1,12 +1,9 @@
 'use client';
 
 import React from 'react';
-import { LeagueChampionshipStats } from '@/components/leagues/LeagueChampionshipStats';
-import { StandingsTable } from '@/components/leagues/StandingsTable';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
+import { LeagueStandingsTable } from '@/components/leagues/LeagueStandingsTable';
 import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
 
 interface LeagueStandingsTemplateProps {
@@ -18,37 +15,38 @@ interface LeagueStandingsTemplateProps {
 
 export function LeagueStandingsTemplate({
   viewData,
-  onRemoveMember,
-  onUpdateRole,
   loading = false,
 }: LeagueStandingsTemplateProps) {
   if (loading) {
     return (
-      <Stack align="center" py={12}>
-        <Text color="text-gray-400">Loading standings...</Text>
-      </Stack>
+      <Box display="flex" alignItems="center" justifyContent="center" py={24}>
+        <Text color="text-zinc-500" font="mono" size="xs" uppercase letterSpacing="widest" animate="pulse">
+          Loading Standings...
+        </Text>
+      </Box>
     );
   }
 
-  return (
-    <Stack gap={6}>
-      {/* Championship Stats */}
-      <LeagueChampionshipStats standings={viewData.standings} drivers={viewData.drivers} />
+  const standings = viewData.standings.map((entry) => {
+    const driver = viewData.drivers.find(d => d.id === entry.driverId);
+    return {
+      position: entry.position,
+      driverName: driver?.name || 'Unknown Driver',
+      points: entry.totalPoints,
+      wins: 0,
+      podiums: 0,
+      gap: entry.position === 1 ? '—' : `-${viewData.standings[0].totalPoints - entry.totalPoints}`
+    };
+  });
 
-      <Card>
-        <Stack gap={4}>
-          <Heading level={2}>Championship Standings</Heading>
-          <StandingsTable
-            standings={viewData.standings}
-            drivers={viewData.drivers}
-            memberships={viewData.memberships}
-            currentDriverId={viewData.currentDriverId ?? undefined}
-            isAdmin={viewData.isAdmin}
-            onRemoveMember={onRemoveMember}
-            onUpdateRole={onUpdateRole}
-          />
-        </Stack>
-      </Card>
-    </Stack>
+  return (
+    <Box display="flex" flexDirection="col" gap={8}>
+      <Box as="header" display="flex" flexDirection="col" gap={2}>
+        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Championship Standings</Text>
+        <Text size="sm" color="text-zinc-500">Official points classification for the current season.</Text>
+      </Box>
+
+      <LeagueStandingsTable standings={standings} />
+    </Box>
   );
 }