53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { RankingListItem } from '@/components/leaderboards/RankingListItem';
|
|
import { RankingList } from '@/components/leaderboards/RankingList';
|
|
import { MinimalEmptyState } from '@/components/shared/state/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 (
|
|
<Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
|
|
<Heading level={3} mb={2}>Rankings</Heading>
|
|
<MinimalEmptyState
|
|
title="No ranking data available yet"
|
|
description="Compete in leagues to earn your first results."
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
|
|
<Heading level={3} mb={4}>Rankings</Heading>
|
|
<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>
|
|
</Card>
|
|
);
|
|
}
|