62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
|
|
|
|
import { Card } from '@/ui/Card';
|
|
import { DriverEntryRow } from '@/ui/DriverEntryRow';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { Users } from 'lucide-react';
|
|
|
|
interface Entry {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
country: string;
|
|
rating?: number | null;
|
|
isCurrentUser: boolean;
|
|
}
|
|
|
|
interface RaceEntryListProps {
|
|
entries: Entry[];
|
|
onDriverClick: (driverId: string) => void;
|
|
}
|
|
|
|
export function RaceEntryList({ entries, onDriverClick }: RaceEntryListProps) {
|
|
return (
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Heading level={2} icon={<Icon icon={Users} size={5} color="rgb(59, 130, 246)" />}>Entry List</Heading>
|
|
<Text size="sm" color="text-gray-400">{entries.length} drivers</Text>
|
|
</Stack>
|
|
|
|
{entries.length === 0 ? (
|
|
<Stack align="center" py={8} gap={3}>
|
|
<Surface variant="muted" rounded="full" p={4}>
|
|
<Icon icon={Users} size={6} color="rgb(82, 82, 82)" />
|
|
</Surface>
|
|
<Text color="text-gray-400">No drivers registered yet</Text>
|
|
</Stack>
|
|
) : (
|
|
<Stack gap={1}>
|
|
{entries.map((driver, index) => (
|
|
<DriverEntryRow
|
|
key={driver.id}
|
|
index={index}
|
|
name={driver.name}
|
|
avatarUrl={driver.avatarUrl}
|
|
country={driver.country}
|
|
rating={driver.rating}
|
|
isCurrentUser={driver.isCurrentUser}
|
|
onClick={() => onDriverClick(driver.id)}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|