46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
|
|
|
|
interface RaceStatsProps {
|
|
stats: {
|
|
total: number;
|
|
scheduled: number;
|
|
running: number;
|
|
completed: number;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
export function RaceStats({ stats, className }: RaceStatsProps) {
|
|
return (
|
|
<div className={`relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 ${className || ''}`}>
|
|
<div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
|
|
<div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
|
|
<CalendarDays className="w-4 h-4" />
|
|
<span>Total</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">{stats.total}</p>
|
|
</div>
|
|
<div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
|
|
<div className="flex items-center gap-2 text-primary-blue text-sm mb-1">
|
|
<Clock className="w-4 h-4" />
|
|
<span>Scheduled</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">{stats.scheduled}</p>
|
|
</div>
|
|
<div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
|
|
<div className="flex items-center gap-2 text-performance-green text-sm mb-1">
|
|
<Zap className="w-4 h-4" />
|
|
<span>Live Now</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">{stats.running}</p>
|
|
</div>
|
|
<div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
|
|
<div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
|
|
<Trophy className="w-4 h-4" />
|
|
<span>Completed</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">{stats.completed}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |