68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Text } from '@/ui/Text';
|
|
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
|
import { Badge } from '@/ui/Badge';
|
|
|
|
interface Entrant {
|
|
id: string;
|
|
name: string;
|
|
teamName?: string;
|
|
carName: string;
|
|
rating: number;
|
|
status: 'confirmed' | 'withdrawn' | 'pending';
|
|
}
|
|
|
|
interface EntrantsTableProps {
|
|
entrants: Entrant[];
|
|
}
|
|
|
|
export function EntrantsTable({ entrants }: EntrantsTableProps) {
|
|
return (
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Driver</TableHeader>
|
|
<TableHeader>Team</TableHeader>
|
|
<TableHeader>Car</TableHeader>
|
|
<TableHeader textAlign="right">Rating</TableHeader>
|
|
<TableHeader textAlign="right">Status</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{entrants.map((entrant) => (
|
|
<TableRow key={entrant.id}>
|
|
<TableCell>
|
|
<Text size="sm" weight="bold">{entrant.name}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text size="xs" color="text-gray-400">{entrant.teamName || '-'}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text size="xs" color="text-gray-400">{entrant.carName}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Text size="xs" font="mono" color="text-telemetry-aqua">{entrant.rating}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Badge
|
|
variant={
|
|
entrant.status === 'confirmed'
|
|
? 'success'
|
|
: entrant.status === 'withdrawn'
|
|
? 'danger'
|
|
: 'warning'
|
|
}
|
|
size="sm"
|
|
>
|
|
{entrant.status.toUpperCase()}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|