website refactor

apps/website/components/races/SidebarRaceItem.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+
+interface SidebarRaceItemProps {
+  race: {
+    id: string;
+    track: string;
+    scheduledAt: string;
+  };
+  onClick?: () => void;
+  className?: string;
+}
+
+export function SidebarRaceItem({ race, onClick, className }: SidebarRaceItemProps) {
+  const scheduledAtDate = new Date(race.scheduledAt);
+
+  return (
+    <Box
+      onClick={onClick}
+      display="flex"
+      alignItems="center"
+      gap={3}
+      p={2}
+      rounded="lg"
+      cursor="pointer"
+      className={`hover:bg-deep-graphite transition-colors ${className || ''}`}
+    >
+      <Box flexShrink={0} width="10" height="10" bg="bg-primary-blue/10" rounded="lg" display="flex" center>
+        <Text size="sm" weight="bold" color="text-primary-blue">
+          {scheduledAtDate.getDate()}
+        </Text>
+      </Box>
+      <Box flexGrow={1} minWidth="0">
+        <Text size="sm" weight="medium" color="text-white" block truncate>{race.track}</Text>
+        <Text size="xs" color="text-gray-500" block>{scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</Text>
+      </Box>
+      <Icon icon={ChevronRight} size={4} color="text-gray-500" />
+    </Box>
+  );
+}