website refactor

apps/website/templates/LeaguesTemplate.tsx

@@ -7,7 +7,6 @@ import { PageHeader } from '@/ui/PageHeader';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
-import { Grid } from '@/ui/Grid';
 import { Container } from '@/ui/Container';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
@@ -15,8 +14,7 @@ import { Section } from '@/ui/Section';
 import { ControlBar } from '@/ui/ControlBar';
 import { SegmentedControl } from '@/ui/SegmentedControl';
 import { MetricCard } from '@/ui/MetricCard';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
+import { FeatureGrid } from '@/ui/FeatureGrid';
 import {
   Plus,
   Search,
@@ -73,27 +71,27 @@ export function LeaguesTemplate({
   onClearFilters,
 }: LeaguesTemplateProps) {
   return (
-    <Container size="xl" py={8}>
-      <Stack gap={8}>
-        {/* Header Section */}
-        <PageHeader
-          icon={Trophy}
-          title="Leagues"
-          description="Infrastructure for competitive sim racing."
-          action={
-            <Button 
-              onClick={onCreateLeague}
-              variant="primary"
-              size="lg"
-              icon={<Plus size={16} />}
-            >
-              Create League
-            </Button>
-          }
-        />
+    <Section variant="default" padding="lg">
+      {/* Header Section */}
+      <PageHeader
+        icon={Trophy}
+        title="Leagues"
+        description="Infrastructure for competitive sim racing."
+        action={
+          <Button 
+            onClick={onCreateLeague}
+            variant="primary"
+            size="lg"
+            icon={<Plus size={16} />}
+          >
+            Create League
+          </Button>
+        }
+      />
 
-        {/* Stats Overview */}
-        <Grid cols={{ base: 1, md: 3 }} gap={4}>
+      {/* Stats Overview */}
+      <Container size="full" padding="none" py={8}>
+        <FeatureGrid columns={{ base: 1, md: 3 }} gap={4}>
           <MetricCard 
             label="Active Leagues" 
             value={viewData.leagues.length} 
@@ -112,68 +110,67 @@ export function LeaguesTemplate({
             icon={Trophy}
             intent="success"
           />
-        </Grid>
+        </FeatureGrid>
+      </Container>
 
-        {/* Control Bar */}
-        <ControlBar
-          leftContent={
-            <Group gap={4} align="center">
-              <Icon icon={Filter} size={4} intent="low" />
-              <SegmentedControl
-                options={categories.map(c => ({
-                  id: c.id,
-                  label: c.label,
-                  icon: <Icon icon={c.icon} size={3} />
-                }))}
-                activeId={activeCategory}
-                onChange={(id) => onCategoryChange(id as CategoryId)}
-              />
-            </Group>
-          }
-        >
-          <Box width="300px">
-            <Input
-              type="text"
-              placeholder="Search infrastructure..."
-              value={searchQuery}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-              icon={<Search size={16} />}
-              size="sm"
+      {/* Control Bar */}
+      <ControlBar
+        leftContent={
+          <Group gap={4} align="center">
+            <Icon icon={Filter} size={4} intent="low" />
+            <SegmentedControl
+              options={categories.map(c => ({
+                id: c.id,
+                label: c.label,
+                icon: <Icon icon={c.icon} size={3} />
+              }))}
+              activeId={activeCategory}
+              onChange={(id) => onCategoryChange(id as CategoryId)}
             />
-          </Box>
-        </ControlBar>
+          </Group>
+        }
+      >
+        <Input
+          type="text"
+          placeholder="Search infrastructure..."
+          value={searchQuery}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+          icon={<Search size={16} />}
+          size="sm"
+          width="300px"
+        />
+      </ControlBar>
 
-        {/* Results */}
-        <Stack gap={6}>
-          {filteredLeagues.length > 0 ? (
-            <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
-              {filteredLeagues.map((league) => (
-                <LeagueCard
-                  key={league.id}
-                  league={league as unknown as LeagueSummaryViewModel}
-                  onClick={() => onLeagueClick(league.id)}
-                />
-              ))}
-            </Grid>
-          ) : (
-            <Section variant="dark" padding="lg">
-              <Stack align="center" justify="center" gap={4}>
-                <Icon icon={Search} size={12} intent="low" />
-                <Stack align="center" gap={1}>
-                  <Text size="lg" weight="bold">No results found</Text>
-                  <Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
-                </Stack>
-                <Button 
-                  variant="secondary"
-                  onClick={onClearFilters}
-                >
-                  Reset Filters
-                </Button>
-              </Stack>
-            </Section>
-          )}
-        </Stack>
-      </Stack>
-    </Container>
+      {/* Results */}
+      <Container size="full" padding="none" py={6}>
+        {filteredLeagues.length > 0 ? (
+          <FeatureGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6}>
+            {filteredLeagues.map((league) => (
+              <LeagueCard
+                key={league.id}
+                league={league as unknown as LeagueSummaryViewModel}
+                onClick={() => onLeagueClick(league.id)}
+              />
+            ))}
+          </FeatureGrid>
+        ) : (
+          <Section variant="dark" padding="lg">
+            <Group direction="col" align="center" justify="center" gap={4}>
+              <Icon icon={Search} size={12} intent="low" />
+              <Group direction="col" align="center" gap={1}>
+                <Text size="lg" weight="bold">No results found</Text>
+                <Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
+              </Group>
+              <Button 
+                variant="secondary"
+                onClick={onClearFilters}
+              >
+                Reset Filters
+              </Button>
+            </Group>
+          </Section>
+        )}
+      </Container>
+    </Section>
   );
 }