81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import Card from '@/components/ui/Card';
|
|
|
|
export interface DriverRanking {
|
|
type: 'overall' | 'league';
|
|
name: string;
|
|
rank: number;
|
|
totalDrivers: number;
|
|
percentile: number;
|
|
rating: number;
|
|
}
|
|
|
|
interface DriverRankingsProps {
|
|
rankings: DriverRanking[];
|
|
}
|
|
|
|
export default function DriverRankings({ rankings }: DriverRankingsProps) {
|
|
if (!rankings || rankings.length === 0) {
|
|
return (
|
|
<Card className="bg-iron-gray/60 border-charcoal-outline/80">
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-semibold text-white mb-2">Rankings</h3>
|
|
<p className="text-sm text-gray-400">
|
|
No ranking data available yet. Compete in leagues to earn your first results.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="bg-iron-gray/60 border-charcoal-outline/80">
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-semibold text-white mb-4">Rankings</h3>
|
|
<div className="space-y-3">
|
|
{rankings.map((ranking, index) => (
|
|
<div
|
|
key={`${ranking.type}-${ranking.name}-${index}`}
|
|
className="flex items-center justify-between py-2 px-3 rounded-lg bg-deep-graphite/60"
|
|
>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-white">
|
|
{ranking.name}
|
|
</span>
|
|
<span className="text-xs text-gray-400">
|
|
{ranking.type === 'overall' ? 'Overall' : 'League'} ranking
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6 text-right text-xs">
|
|
<div>
|
|
<div className="text-primary-blue text-base font-semibold">
|
|
#{ranking.rank}
|
|
</div>
|
|
<div className="text-gray-500">Position</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-white text-sm font-semibold">
|
|
{ranking.totalDrivers}
|
|
</div>
|
|
<div className="text-gray-500">Drivers</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-green-400 text-sm font-semibold">
|
|
{ranking.percentile.toFixed(1)}%
|
|
</div>
|
|
<div className="text-gray-500">Percentile</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-warning-amber text-sm font-semibold">
|
|
{ranking.rating}
|
|
</div>
|
|
<div className="text-gray-500">Rating</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |