extract components from website

apps/website/components/races/SidebarRaceItem.tsx

@@ -0,0 +1,34 @@
+import { ChevronRight } from 'lucide-react';
+import { formatTime, formatDate } from '@/lib/utilities/time';
+
+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 (
+    <div
+      onClick={onClick}
+      className={`flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors ${className || ''}`}
+    >
+      <div className="flex-shrink-0 w-10 h-10 bg-primary-blue/10 rounded-lg flex items-center justify-center">
+        <span className="text-sm font-bold text-primary-blue">
+          {scheduledAtDate.getDate()}
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-white truncate">{race.track}</p>
+        <p className="text-xs text-gray-500">{formatTime(scheduledAtDate)}</p>
+      </div>
+      <ChevronRight className="w-4 h-4 text-gray-500" />
+    </div>
+  );
+}