67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { Calendar, Trophy, Users, Zap } from 'lucide-react';
|
|
|
|
interface RaceResultsHeaderProps {
|
|
raceTrack: string | undefined;
|
|
raceScheduledAt: string | undefined;
|
|
totalDrivers: number | undefined;
|
|
leagueName: string | undefined;
|
|
raceSOF: number | null | undefined;
|
|
}
|
|
|
|
const DEFAULT_RACE_TRACK = 'Race';
|
|
|
|
export default function RaceResultsHeader({
|
|
raceTrack = 'Race',
|
|
raceScheduledAt,
|
|
totalDrivers,
|
|
leagueName,
|
|
raceSOF
|
|
}: RaceResultsHeaderProps) {
|
|
return (
|
|
<div className="relative overflow-hidden rounded-2xl bg-gray-500/10 border border-gray-500/30 p-6 sm:p-8">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30">
|
|
<Trophy className="w-4 h-4 text-performance-green" />
|
|
<span className="text-sm font-semibold text-performance-green">
|
|
Final Results
|
|
</span>
|
|
</div>
|
|
{raceSOF && (
|
|
<span className="flex items-center gap-1.5 text-warning-amber text-sm">
|
|
<Zap className="w-4 h-4" />
|
|
SOF {raceSOF}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">
|
|
{raceTrack || DEFAULT_RACE_TRACK} Results
|
|
</h1>
|
|
|
|
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
|
|
{raceScheduledAt && (
|
|
<span className="flex items-center gap-2">
|
|
<Calendar className="w-4 h-4" />
|
|
{new Date(raceScheduledAt).toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</span>
|
|
)}
|
|
{totalDrivers !== undefined && totalDrivers !== null && (
|
|
<span className="flex items-center gap-2">
|
|
<Users className="w-4 h-4" />
|
|
{totalDrivers} drivers classified
|
|
</span>
|
|
)}
|
|
{leagueName && <span className="text-primary-blue">{leagueName}</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |