87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { Calendar, Trophy } from 'lucide-react';
|
|
|
|
interface SessionResult {
|
|
id: string;
|
|
date: string;
|
|
event: string;
|
|
car: string;
|
|
position: number;
|
|
fieldSize: number;
|
|
ratingChange: number;
|
|
}
|
|
|
|
interface SessionHistoryTableProps {
|
|
results: SessionResult[];
|
|
}
|
|
|
|
export function SessionHistoryTable({ results }: SessionHistoryTableProps) {
|
|
if (results.length === 0) {
|
|
return (
|
|
<Stack align="center" justify="center" py={12} gap={4}>
|
|
<Trophy size={48} color="#23272B" />
|
|
<Text color="#6b7280">No race history found.</Text>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Date</TableHeader>
|
|
<TableHeader>Event</TableHeader>
|
|
<TableHeader>Car</TableHeader>
|
|
<TableHeader>Pos</TableHeader>
|
|
<TableHeader className="text-right">Rating</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{results.map((result) => (
|
|
<TableRow key={result.id}>
|
|
<TableCell>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Calendar size={12} className="text-gray-500" />
|
|
<Text size="xs" font="mono">
|
|
{new Date(result.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
|
</Text>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text weight="bold" size="sm">{result.event}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text size="xs" color="#9ca3af">{result.car}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Badge
|
|
variant={result.position === 1 ? 'success' : result.position <= 3 ? 'warning' : 'default'}
|
|
>
|
|
P{result.position}
|
|
</Badge>
|
|
<Text size="xs" color="#6b7280">/ {result.fieldSize}</Text>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Text
|
|
size="xs"
|
|
font="mono"
|
|
weight="bold"
|
|
color={result.ratingChange >= 0 ? '#10b981' : '#ef4444'}
|
|
>
|
|
{result.ratingChange >= 0 ? '+' : ''}{result.ratingChange}
|
|
</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|