website refactor

apps/website/components/races/RacePageHeader.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import { Flag, CalendarDays, Clock, Zap, Trophy, LucideIcon } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/Grid';
+import { Surface } from '@/ui/Surface';
+
+interface RacePageHeaderProps {
+  totalCount: number;
+  scheduledCount: number;
+  runningCount: number;
+  completedCount: number;
+}
+
+export function RacePageHeader({
+  totalCount,
+  scheduledCount,
+  runningCount,
+  completedCount,
+}: RacePageHeaderProps) {
+  return (
+    <Surface 
+      bg="bg-surface-charcoal" 
+      rounded="xl" 
+      border 
+      borderColor="border-outline-steel" 
+      padding={6}
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Background Accent */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="1" 
+        bg="bg-primary-accent"
+      />
+
+      <Stack gap={6}>
+        <Stack gap={2}>
+          <Stack direction="row" align="center" gap={3}>
+            <Icon icon={Flag} size={6} color="var(--primary-accent)" />
+            <Heading level={1}>RACE DASHBOARD</Heading>
+          </Stack>
+          <Text color="text-gray-400" size="sm">
+            Precision tracking for upcoming sessions and live events.
+          </Text>
+        </Stack>
+
+        <Grid cols={2} mdCols={4} gap={4}>
+          <StatItem icon={CalendarDays} label="TOTAL SESSIONS" value={totalCount} />
+          <StatItem icon={Clock} label="SCHEDULED" value={scheduledCount} color="text-primary-accent" />
+          <StatItem icon={Zap} label="LIVE NOW" value={runningCount} color="text-success-green" />
+          <StatItem icon={Trophy} label="COMPLETED" value={completedCount} color="text-gray-400" />
+        </Grid>
+      </Stack>
+    </Surface>
+  );
+}
+
+function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIcon, label: string, value: number, color?: string }) {
+  return (
+    <Box p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
+      <Stack gap={1}>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : undefined} groupHoverTextColor={color !== 'text-white' ? color : undefined} />
+          <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
+        </Stack>
+        <Text size="2xl" weight="bold" color={color}>{value}</Text>
+      </Stack>
+    </Box>
+  );
+}