51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
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>
|
|
);
|
|
} |