website refactor

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>
+  );
+}