77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import Card from '../ui/Card';
|
|
import RankBadge from './RankBadge';
|
|
|
|
interface RankingData {
|
|
type: 'overall' | 'league' | 'class';
|
|
name: string;
|
|
rank: number;
|
|
totalDrivers: number;
|
|
percentile: number;
|
|
rating: number;
|
|
}
|
|
|
|
interface DriverRankingsProps {
|
|
rankings: RankingData[];
|
|
}
|
|
|
|
export default function DriverRankings({ rankings }: DriverRankingsProps) {
|
|
const getPercentileColor = (percentile: number) => {
|
|
if (percentile >= 90) return 'text-green-400';
|
|
if (percentile >= 75) return 'text-primary-blue';
|
|
if (percentile >= 50) return 'text-warning-amber';
|
|
return 'text-gray-400';
|
|
};
|
|
|
|
const getPercentileLabel = (percentile: number) => {
|
|
if (percentile >= 90) return 'Top 10%';
|
|
if (percentile >= 75) return 'Top 25%';
|
|
if (percentile >= 50) return 'Top 50%';
|
|
return `${(100 - percentile).toFixed(0)}th percentile`;
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<h3 className="text-xl font-semibold text-white mb-6">Rankings</h3>
|
|
|
|
<div className="space-y-4">
|
|
{rankings.map((ranking, index) => (
|
|
<div
|
|
key={index}
|
|
className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<RankBadge rank={ranking.rank} size="md" />
|
|
<div>
|
|
<div className="text-white font-medium">{ranking.name}</div>
|
|
<div className="text-sm text-gray-400">
|
|
{ranking.rank} of {ranking.totalDrivers} drivers
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-2xl font-bold text-primary-blue">{ranking.rating}</div>
|
|
<div className="text-xs text-gray-400">Rating</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-gray-400">Percentile</span>
|
|
<span className={`font-medium ${getPercentileColor(ranking.percentile)}`}>
|
|
{getPercentileLabel(ranking.percentile)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{rankings.length === 0 && (
|
|
<div className="text-center py-8 text-gray-400">
|
|
No ranking data available yet.
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
} |