website refactor

apps/website/templates/LeagueSettingsTemplate.tsx

@@ -1,7 +1,17 @@
-import { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
+'use client';
+
+import React from 'react';
 import { Card } from '@/ui/Card';
-import { Section } from '@/ui/Section';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
 import { Settings, Users, Trophy, Shield, Clock } from 'lucide-react';
+import type { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
 
 interface LeagueSettingsTemplateProps {
   viewData: LeagueSettingsViewData;
@@ -9,113 +19,98 @@ interface LeagueSettingsTemplateProps {
 
 export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps) {
   return (
-    <Section>
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-xl font-semibold text-white">League Settings</h2>
-          <p className="text-sm text-gray-400 mt-1">
-            Manage your league configuration and preferences
-          </p>
-        </div>
-      </div>
+    <Stack gap={6}>
+      <Box>
+        <Heading level={2}>League Settings</Heading>
+        <Text size="sm" color="text-gray-400" block mt={1}>
+          Manage your league configuration and preferences
+        </Text>
+      </Box>
 
-      <div className="space-y-6">
+      <Stack gap={6}>
         {/* League Information */}
         <Card>
-          <div className="flex items-center gap-3 mb-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
-              <Settings className="w-5 h-5 text-primary-blue" />
-            </div>
-            <div>
-              <h3 className="text-lg font-semibold text-white">League Information</h3>
-              <p className="text-sm text-gray-400">Basic league details</p>
-            </div>
-          </div>
+          <Stack gap={4}>
+            <Stack direction="row" align="center" gap={3}>
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
+                <Icon icon={Settings} size={5} color="#3b82f6" />
+              </Surface>
+              <Box>
+                <Heading level={3}>League Information</Heading>
+                <Text size="sm" color="text-gray-400">Basic league details</Text>
+              </Box>
+            </Stack>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">Name</label>
-              <p className="text-white">{viewData.league.name}</p>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">Visibility</label>
-              <p className="text-white capitalize">{viewData.league.visibility}</p>
-            </div>
-            <div className="md:col-span-2">
-              <label className="block text-sm font-medium text-gray-400 mb-1">Description</label>
-              <p className="text-white">{viewData.league.description}</p>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">Created</label>
-              <p className="text-white">{new Date(viewData.league.createdAt).toLocaleDateString()}</p>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">Owner ID</label>
-              <p className="text-white font-mono text-sm">{viewData.league.ownerId}</p>
-            </div>
-          </div>
+            <Grid cols={2} gap={4}>
+              <InfoItem label="Name" value={viewData.league.name} />
+              <InfoItem label="Visibility" value={viewData.league.visibility} capitalize />
+              <GridItem colSpan={2}>
+                <InfoItem label="Description" value={viewData.league.description} />
+              </GridItem>
+              <InfoItem label="Created" value={new Date(viewData.league.createdAt).toLocaleDateString()} />
+              <InfoItem label="Owner ID" value={viewData.league.ownerId} mono />
+            </Grid>
+          </Stack>
         </Card>
 
         {/* Configuration */}
         <Card>
-          <div className="flex items-center gap-3 mb-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
-              <Trophy className="w-5 h-5 text-performance-green" />
-            </div>
-            <div>
-              <h3 className="text-lg font-semibold text-white">Configuration</h3>
-              <p className="text-sm text-gray-400">League rules and limits</p>
-            </div>
-          </div>
+          <Stack gap={4}>
+            <Stack direction="row" align="center" gap={3}>
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
+                <Icon icon={Trophy} size={5} color="#10b981" />
+              </Surface>
+              <Box>
+                <Heading level={3}>Configuration</Heading>
+                <Text size="sm" color="text-gray-400">League rules and limits</Text>
+              </Box>
+            </Stack>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="flex items-center gap-3">
-              <Users className="w-5 h-5 text-gray-400" />
-              <div>
-                <p className="text-sm font-medium text-gray-400">Max Drivers</p>
-                <p className="text-white">{viewData.config.maxDrivers}</p>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-3">
-              <Shield className="w-5 h-5 text-gray-400" />
-              <div>
-                <p className="text-sm font-medium text-gray-400">Require Approval</p>
-                <p className="text-white">{viewData.config.requireApproval ? 'Yes' : 'No'}</p>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-3">
-              <Clock className="w-5 h-5 text-gray-400" />
-              <div>
-                <p className="text-sm font-medium text-gray-400">Allow Late Join</p>
-                <p className="text-white">{viewData.config.allowLateJoin ? 'Yes' : 'No'}</p>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-3">
-              <Trophy className="w-5 h-5 text-gray-400" />
-              <div>
-                <p className="text-sm font-medium text-gray-400">Scoring Preset</p>
-                <p className="text-white font-mono text-sm">{viewData.config.scoringPresetId}</p>
-              </div>
-            </div>
-          </div>
+            <Grid cols={2} gap={4}>
+              <ConfigItem icon={Users} label="Max Drivers" value={viewData.config.maxDrivers} />
+              <ConfigItem icon={Shield} label="Require Approval" value={viewData.config.requireApproval ? 'Yes' : 'No'} />
+              <ConfigItem icon={Clock} label="Allow Late Join" value={viewData.config.allowLateJoin ? 'Yes' : 'No'} />
+              <ConfigItem icon={Trophy} label="Scoring Preset" value={viewData.config.scoringPresetId} mono />
+            </Grid>
+          </Stack>
         </Card>
 
         {/* Note about forms */}
         <Card>
-          <div className="text-center py-8">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-warning-amber/10 flex items-center justify-center">
-              <Settings className="w-8 h-8 text-warning-amber" />
-            </div>
-            <h3 className="text-lg font-medium text-white mb-2">Settings Management</h3>
-            <p className="text-sm text-gray-400">
-              Form-based editing and ownership transfer functionality will be implemented in future updates.
-            </p>
-          </div>
+          <Stack align="center" py={8} gap={4}>
+            <Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
+              <Icon icon={Settings} size={8} color="#f59e0b" />
+            </Surface>
+            <Box style={{ textAlign: 'center' }}>
+              <Heading level={3}>Settings Management</Heading>
+              <Text size="sm" color="text-gray-400" block mt={2}>
+                Form-based editing and ownership transfer functionality will be implemented in future updates.
+              </Text>
+            </Box>
+          </Stack>
         </Card>
-      </div>
-    </Section>
+      </Stack>
+    </Stack>
   );
-}
+}
+
+function InfoItem({ label, value, capitalize, mono }: { label: string, value: string, capitalize?: boolean, mono?: boolean }) {
+  return (
+    <Box>
+      <Text size="sm" weight="medium" color="text-gray-400" block mb={1}>{label}</Text>
+      <Text color="text-white" style={{ textTransform: capitalize ? 'capitalize' : 'none', fontFamily: mono ? 'monospace' : 'inherit' }}>{value}</Text>
+    </Box>
+  );
+}
+
+function ConfigItem({ icon, label, value, mono }: { icon: React.ElementType, label: string, value: string | number, mono?: boolean }) {
+  return (
+    <Stack direction="row" align="center" gap={3}>
+      <Icon icon={icon as any} size={5} color="#9ca3af" />
+      <Box>
+        <Text size="sm" weight="medium" color="text-gray-400" block>{label}</Text>
+        <Text color="text-white" style={{ fontFamily: mono ? 'monospace' : 'inherit' }}>{value}</Text>
+      </Box>
+    </Stack>
+  );
+}