108 lines
4.4 KiB
TypeScript
108 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Image } from '@/ui/Image';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
|
|
|
|
interface ResultEntry {
|
|
position: number;
|
|
driverId: string;
|
|
driverName: string;
|
|
driverAvatar: string;
|
|
country: string;
|
|
car: string;
|
|
laps: number;
|
|
time: string;
|
|
fastestLap: string;
|
|
points: number;
|
|
incidents: number;
|
|
isCurrentUser: boolean;
|
|
}
|
|
|
|
interface RaceResultRowProps {
|
|
result: ResultEntry;
|
|
points: number;
|
|
}
|
|
|
|
export function RaceResultRow({ result, points }: RaceResultRowProps) {
|
|
const { isCurrentUser, position, driverAvatar, driverName, country, car, laps, incidents, time, fastestLap } = result;
|
|
|
|
return (
|
|
<Surface
|
|
variant={isCurrentUser ? 'muted' : 'dark'}
|
|
rounded="xl"
|
|
border={isCurrentUser}
|
|
padding={3}
|
|
style={{
|
|
background: isCurrentUser ? 'linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1), transparent)' : undefined,
|
|
borderColor: isCurrentUser ? 'rgba(59, 130, 246, 0.4)' : undefined
|
|
}}
|
|
>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
{/* Position */}
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
padding={1}
|
|
style={{
|
|
width: '2.5rem',
|
|
height: '2.5rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: position === 1 ? 'rgba(250, 204, 21, 0.2)' : position === 2 ? 'rgba(209, 213, 219, 0.2)' : position === 3 ? 'rgba(217, 119, 6, 0.2)' : 'rgba(38, 38, 38, 0.5)',
|
|
color: position === 1 ? '#facc15' : position === 2 ? '#d1d5db' : position === 3 ? '#d97706' : '#737373'
|
|
}}
|
|
>
|
|
<Text weight="bold">{position}</Text>
|
|
</Surface>
|
|
|
|
{/* Avatar */}
|
|
<Box style={{ position: 'relative', flexShrink: 0 }}>
|
|
<Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid rgba(59, 130, 246, 0.5)' : 'none' }}>
|
|
<Image src={driverAvatar} alt={driverName} 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(country).toString()}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Driver Info */}
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Text weight="semibold" size="sm" color={isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driverName}</Text>
|
|
{isCurrentUser && (
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#3b82f6', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
|
<Text size="xs" weight="bold" color="text-white">YOU</Text>
|
|
</Surface>
|
|
)}
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={2} mt={1}>
|
|
<Text size="xs" color="text-gray-500">{car}</Text>
|
|
<Text size="xs" color="text-gray-500">•</Text>
|
|
<Text size="xs" color="text-gray-500">Laps: {laps}</Text>
|
|
<Text size="xs" color="text-gray-500">•</Text>
|
|
<Text size="xs" color="text-gray-500">Incidents: {incidents}</Text>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Times */}
|
|
<Box style={{ textAlign: 'right', minWidth: '100px' }}>
|
|
<Text size="sm" font="mono" color="text-white" block>{time}</Text>
|
|
<Text size="xs" color="text-performance-green" block mt={1}>FL: {fastestLap}</Text>
|
|
</Box>
|
|
|
|
{/* Points */}
|
|
<Surface variant="muted" rounded="lg" border padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', borderColor: 'rgba(245, 158, 11, 0.2)', textAlign: 'center', minWidth: '3.5rem' }}>
|
|
<Text size="xs" color="text-gray-500" block>PTS</Text>
|
|
<Text size="sm" weight="bold" color="text-warning-amber">{points}</Text>
|
|
</Surface>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|