53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { RankingListItem } from '@/components/leaderboards/RankingListItem';
|
|
import { RankingList } from '@/components/leaderboards/RankingList';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
|
|
export interface DriverRanking {
|
|
type: 'overall' | 'league';
|
|
name: string;
|
|
rank: number;
|
|
totalDrivers: number;
|
|
percentile: number;
|
|
rating: number;
|
|
}
|
|
|
|
interface DriverRankingsProps {
|
|
rankings: DriverRanking[];
|
|
}
|
|
|
|
export function DriverRankings({ rankings }: DriverRankingsProps) {
|
|
if (!rankings || rankings.length === 0) {
|
|
return (
|
|
<Panel title="Rankings">
|
|
<EmptyState
|
|
title="No ranking data available yet"
|
|
description="Compete in leagues to earn your first results."
|
|
variant="minimal"
|
|
/>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Panel title="Rankings">
|
|
<RankingList>
|
|
{rankings.map((ranking, index) => (
|
|
<RankingListItem
|
|
key={`${ranking.type}-${ranking.name}-${index}`}
|
|
name={ranking.name}
|
|
type={ranking.type}
|
|
rank={ranking.rank}
|
|
totalDrivers={ranking.totalDrivers}
|
|
percentile={ranking.percentile}
|
|
rating={ranking.rating}
|
|
/>
|
|
))}
|
|
</RankingList>
|
|
</Panel>
|
|
);
|
|
}
|