website refactor

apps/website/templates/LeagueStandingsTemplate.tsx

@@ -1,14 +1,15 @@
 'use client';
 
+import React from 'react';
 import { LeagueChampionshipStats } from '@/components/leagues/LeagueChampionshipStats';
 import { StandingsTable } from '@/components/leagues/StandingsTable';
-import Card from '@/components/ui/Card';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
 import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
 
-// ============================================================================
-// TYPES
-// ============================================================================
-
 interface LeagueStandingsTemplateProps {
   viewData: LeagueStandingsViewData;
   onRemoveMember: (driverId: string) => void;
@@ -16,10 +17,6 @@ interface LeagueStandingsTemplateProps {
   loading?: boolean;
 }
 
-// ============================================================================
-// MAIN TEMPLATE COMPONENT
-// ============================================================================
-
 export function LeagueStandingsTemplate({
   viewData,
   onRemoveMember,
@@ -28,29 +25,31 @@ export function LeagueStandingsTemplate({
 }: LeagueStandingsTemplateProps) {
   if (loading) {
     return (
-      <div className="text-center text-gray-400">
-        Loading standings...
-      </div>
+      <Stack align="center" py={12}>
+        <Text color="text-gray-400">Loading standings...</Text>
+      </Stack>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <Stack gap={6}>
       {/* Championship Stats */}
       <LeagueChampionshipStats standings={viewData.standings} drivers={viewData.drivers} />
 
       <Card>
-        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
-        <StandingsTable
-          standings={viewData.standings}
-          drivers={viewData.drivers}
-          memberships={viewData.memberships}
-          currentDriverId={viewData.currentDriverId ?? undefined}
-          isAdmin={viewData.isAdmin}
-          onRemoveMember={onRemoveMember}
-          onUpdateRole={onUpdateRole}
-        />
+        <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>
-    </div>
+    </Stack>
   );
-}
+}