87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { PositionBadge } from '@/ui/ResultRow';
|
|
import { TrendingUp, Trophy } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface StandingsEntry {
|
|
position: number;
|
|
driverName: string;
|
|
points: number;
|
|
wins: number;
|
|
podiums: number;
|
|
change?: number;
|
|
}
|
|
|
|
interface StandingsTableShellProps {
|
|
standings: StandingsEntry[];
|
|
title?: string;
|
|
}
|
|
|
|
export function StandingsTableShell({ standings, title = 'Championship Standings' }: StandingsTableShellProps) {
|
|
return (
|
|
<Panel
|
|
title={title}
|
|
variant="dark"
|
|
padding={0}
|
|
footer={
|
|
<Text size="xs" variant="low">{standings.length} Drivers</Text>
|
|
}
|
|
>
|
|
<div style={{ overflowX: 'auto' }}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader w="4rem">Pos</TableHeader>
|
|
<TableHeader>Driver</TableHeader>
|
|
<TableHeader textAlign="center">Wins</TableHeader>
|
|
<TableHeader textAlign="center">Podiums</TableHeader>
|
|
<TableHeader textAlign="right">Points</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{standings.map((entry) => (
|
|
<TableRow key={entry.driverName}>
|
|
<TableCell>
|
|
<PositionBadge position={entry.position} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<Text weight="bold" variant="high">{entry.driverName}</Text>
|
|
{entry.change !== undefined && entry.change !== 0 && (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
|
|
<Icon
|
|
icon={TrendingUp}
|
|
size={3}
|
|
intent={entry.change > 0 ? 'success' : 'critical'}
|
|
style={{ transform: entry.change < 0 ? 'rotate(180deg)' : undefined }}
|
|
/>
|
|
<Text size="xs" variant={entry.change > 0 ? 'success' : 'critical'}>
|
|
{Math.abs(entry.change)}
|
|
</Text>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell textAlign="center">
|
|
<Text size="sm" variant={entry.wins > 0 ? 'high' : 'low'}>{entry.wins}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="center">
|
|
<Text size="sm" variant={entry.podiums > 0 ? 'high' : 'low'}>{entry.podiums}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Text weight="bold" variant="primary">{entry.points}</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</Panel>
|
|
);
|
|
}
|