website refactor

apps/website/ui/DateHeader.tsx

@@ -1,30 +1,31 @@
 import React from 'react';
-import { Calendar } from 'lucide-react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
+import { Stack } from './primitives/Stack';
+import { Calendar } from 'lucide-react';
 import { Icon } from './Icon';
 
-interface DateHeaderProps {
-  label: string;
-  count?: number;
-  countLabel?: string;
+export interface DateHeaderProps {
+  date: string;
+  showIcon?: boolean;
 }
 
-export function DateHeader({ label, count, countLabel = 'races' }: DateHeaderProps) {
+export const DateHeader = ({ 
+  date, 
+  showIcon = true 
+}: 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 direction="row" align="center" gap={3} paddingX={2}>
+      {showIcon && (
+        <Box padding={2} bg="rgba(25, 140, 255, 0.1)" rounded="lg">
+          <Icon icon={Calendar} size={4} intent="primary" />
+        </Box>
       )}
+      <Box>
+        <Text weight="semibold" size="sm" variant="high">
+          {date}
+        </Text>
+      </Box>
     </Stack>
   );
-}
+};