extract components from website

apps/website/components/races/LiveRaceBanner.tsx

@@ -0,0 +1,51 @@
+import { ChevronRight, PlayCircle } from 'lucide-react';
+
+interface LiveRaceBannerProps {
+  liveRaces: Array<{
+    id: string;
+    track: string;
+    leagueName: string;
+  }>;
+  onRaceClick?: (raceId: string) => void;
+  className?: string;
+}
+
+export function LiveRaceBanner({ liveRaces, onRaceClick, className }: LiveRaceBannerProps) {
+  if (liveRaces.length === 0) return null;
+
+  return (
+    <div className={`relative overflow-hidden rounded-xl bg-gradient-to-r from-performance-green/20 via-performance-green/10 to-transparent border border-performance-green/30 p-6 ${className || ''}`}>
+      <div className="absolute top-0 right-0 w-32 h-32 bg-performance-green/20 rounded-full blur-2xl animate-pulse" />
+
+      <div className="relative z-10">
+        <div className="flex items-center gap-2 mb-4">
+          <div className="flex items-center gap-2 px-3 py-1 bg-performance-green/20 rounded-full">
+            <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
+            <span className="text-performance-green font-semibold text-sm">LIVE NOW</span>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          {liveRaces.map((race) => (
+            <div
+              key={race.id}
+              onClick={() => onRaceClick?.(race.id)}
+              className="flex items-center justify-between p-4 bg-deep-graphite/80 rounded-lg border border-performance-green/20 cursor-pointer hover:border-performance-green/40 transition-all"
+            >
+              <div className="flex items-center gap-4">
+                <div className="p-2 bg-performance-green/20 rounded-lg">
+                  <PlayCircle className="w-5 h-5 text-performance-green" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-white">{race.track}</h3>
+                  <p className="text-sm text-gray-400">{race.leagueName}</p>
+                </div>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}