website refactor

apps/website/components/races/RacesAllLayout.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface RacesAllLayoutProps {
+  children: ReactNode;
+  header: ReactNode;
+  stats: ReactNode;
+  pagination: ReactNode;
+}
+
+export function RacesAllLayout({ children, header, stats, pagination }: RacesAllLayoutProps) {
+  return (
+    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
+      <Container size="lg">
+        <Stack gap={8}>
+          {header}
+          {stats}
+          {children}
+          {pagination}
+        </Stack>
+      </Container>
+    </Box>
+  );
+}
+
+export function RacesAllStats({ count, onFilterClick }: { count: number, onFilterClick: () => void }) {
+  return (
+    <Box display="flex" justifyContent="between" alignItems="center">
+      <Text size="sm" color="text-gray-400">
+        Showing <Text as="span" color="text-white" weight="bold">{count}</Text> races
+      </Text>
+      <Box 
+        as="button"
+        onClick={onFilterClick}
+        px={4}
+        py={2}
+        bg="bg-surface-charcoal"
+        border
+        borderColor="border-outline-steel"
+        fontSize="10px"
+        weight="bold"
+        letterSpacing="wider"
+        hoverBorderColor="border-primary-accent"
+        transition
+        className="uppercase"
+      >
+        Filters
+      </Box>
+    </Box>
+  );
+}

apps/website/components/races/RacesLayout.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Text } from '@/ui/Text';
+
+interface RacesLayoutProps {
+  children: ReactNode;
+  header: ReactNode;
+  banner?: ReactNode;
+  sidebar: ReactNode;
+}
+
+export function RacesLayout({ children, header, banner, sidebar }: RacesLayoutProps) {
+  return (
+    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
+      <Container size="lg">
+        <Stack gap={8}>
+          {header}
+          {banner}
+          <Grid cols={12} gap={6}>
+            <GridItem colSpan={12} lgSpan={8}>
+              {children}
+            </GridItem>
+            <GridItem colSpan={12} lgSpan={4}>
+              {sidebar}
+            </GridItem>
+          </Grid>
+        </Stack>
+      </Container>
+    </Box>
+  );
+}
+
+export function RaceScheduleSection({ children, title }: { children: ReactNode, title: string }) {
+  return (
+    <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
+      <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
+        <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">{title}</Text>
+      </Box>
+      {children}
+    </Box>
+  );
+}