66 lines
1.9 KiB
TypeScript
66 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 { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface RaceRow {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
leagueName: string | null;
|
|
time: string;
|
|
status: SessionStatus;
|
|
}
|
|
|
|
interface RaceScheduleTableProps {
|
|
races: RaceRow[];
|
|
onRaceClick: (id: string) => void;
|
|
}
|
|
|
|
export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps) {
|
|
return (
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Time</TableHeader>
|
|
<TableHeader>Session Details</TableHeader>
|
|
<TableHeader>League</TableHeader>
|
|
<TableHeader textAlign="right">Status</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{races.map((race) => (
|
|
<TableRow
|
|
key={race.id}
|
|
onClick={() => onRaceClick(race.id)}
|
|
clickable
|
|
>
|
|
<TableCell>
|
|
<Text size="xs" variant="telemetry" weight="bold" mono>{race.time}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack gap={0.5}>
|
|
<Text size="sm" weight="bold" variant="high">
|
|
{race.track}
|
|
</Text>
|
|
<Text size="xs" variant="low" uppercase letterSpacing="widest">{race.car}</Text>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text size="xs" variant="low" weight="medium">{race.leagueName || 'Official'}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Stack direction="row" justify="end">
|
|
<SessionStatusBadge status={race.status} />
|
|
</Stack>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|