website refactor

apps/website/components/races/RacesEmptyState.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Search } from 'lucide-react';
+
+export function RacesEmptyState() {
+  return (
+    <Surface variant="precision" padding="xl">
+      <Stack align="center" justify="center" gap={4} paddingY={12}>
+        <Box 
+          width="3rem" 
+          height="3rem" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center" 
+          rounded="full" 
+          bg="var(--ui-color-bg-surface-muted)"
+        >
+          <Icon icon={Search} size={6} intent="low" />
+        </Box>
+        <Stack gap={1} align="center">
+          <Text size="lg" weight="bold">No races found.</Text>
+          <Text variant="low" size="sm">No races match the current filters.</Text>
+        </Stack>
+      </Stack>
+    </Surface>
+  );
+}