website refactor

apps/website/ui/DateHeader.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Icon } from './Icon';
+
+interface DateHeaderProps {
+  label: string;
+  count?: number;
+  countLabel?: string;
+}
+
+export function DateHeader({ label, count, countLabel = 'races' }: DateHeaderProps) {
+  return (
+    <Stack direction="row" align="center" gap={3} px={2}>
+      <Box p={2} bg="bg-primary-blue/10" rounded="lg">
+        <Icon icon={Calendar} size={4} color="rgb(59, 130, 246)" />
+      </Box>
+      <Text weight="semibold" size="sm" color="text-white">
+        {label}
+      </Text>
+      {count !== undefined && (
+        <Text size="xs" color="text-gray-500">
+          {count} {count === 1 ? countLabel.replace(/s$/, '') : countLabel}
+        </Text>
+      )}
+    </Stack>
+  );
+}