89 lines
3.8 KiB
TypeScript
89 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users, Zap } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Image } from '@/ui/Image';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
|
|
|
|
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="#3b82f6" />}>Entry List</Heading>
|
|
<Text size="sm" color="text-gray-400">{entries.length} drivers</Text>
|
|
</Stack>
|
|
|
|
{entries.length === 0 ? (
|
|
<Stack center py={8} gap={3}>
|
|
<Surface variant="muted" rounded="full" padding={4}>
|
|
<Icon icon={Users} size={6} color="#525252" />
|
|
</Surface>
|
|
<Text color="text-gray-400">No drivers registered yet</Text>
|
|
</Stack>
|
|
) : (
|
|
<Stack gap={1}>
|
|
{entries.map((driver, index) => (
|
|
<Box
|
|
key={driver.id}
|
|
onClick={() => onDriverClick(driver.id)}
|
|
style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.75rem', borderRadius: '0.75rem', cursor: 'pointer', transition: 'all 0.2s', backgroundColor: driver.isCurrentUser ? 'rgba(59, 130, 246, 0.1)' : 'transparent', border: driver.isCurrentUser ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent' }}
|
|
>
|
|
<Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '2rem', height: '2rem', borderRadius: '0.5rem', fontWeight: 'bold', fontSize: '0.875rem', backgroundColor: '#262626', color: '#737373' }}>
|
|
{index + 1}
|
|
</Box>
|
|
|
|
<Box style={{ position: 'relative', flexShrink: 0 }}>
|
|
<Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: driver.isCurrentUser ? '2px solid #3b82f6' : 'none' }}>
|
|
<Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
|
</Box>
|
|
<Box style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#0f1115', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
|
|
{CountryFlagDisplay.fromCountryCode(driver.country).toString()}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Text weight="semibold" size="sm" color={driver.isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driver.name}</Text>
|
|
{driver.isCurrentUser && <Badge variant="primary">You</Badge>}
|
|
</Stack>
|
|
<Text size="xs" color="text-gray-500">{driver.country}</Text>
|
|
</Box>
|
|
|
|
{driver.rating != null && (
|
|
<Badge variant="warning">
|
|
<Icon icon={Zap} size={3} />
|
|
{driver.rating}
|
|
</Badge>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|