75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
|
|
import { Image } from '@/ui/Image';
|
|
import { ResultRow, PositionBadge, ResultPoints } from '@/ui/ResultRow';
|
|
import { Text } from '@/ui/Text';
|
|
import { Badge } from '@/ui/Badge';
|
|
import React from 'react';
|
|
|
|
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 (
|
|
<ResultRow isHighlighted={isCurrentUser}>
|
|
<PositionBadge position={position} />
|
|
|
|
{/* Avatar */}
|
|
<div style={{ position: 'relative', flexShrink: 0 }}>
|
|
<div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)' }}>
|
|
<Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
|
|
</div>
|
|
<div style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
|
|
{CountryFlagDisplay.fromCountryCode(country).toString()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Driver Info */}
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
<Text weight="semibold" size="sm" variant={isCurrentUser ? 'primary' : 'high'} truncate>{driverName}</Text>
|
|
{isCurrentUser && (
|
|
<Badge variant="primary" size="sm">YOU</Badge>
|
|
)}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.25rem' }}>
|
|
<Text size="xs" variant="low">{car}</Text>
|
|
<Text size="xs" variant="low">•</Text>
|
|
<Text size="xs" variant="low">Laps: {laps}</Text>
|
|
<Text size="xs" variant="low">•</Text>
|
|
<Text size="xs" variant="low">Incidents: {incidents}</Text>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Times */}
|
|
<div style={{ textAlign: 'right', minWidth: '100px' }}>
|
|
<Text size="sm" font="mono" variant="high" block>{time}</Text>
|
|
<Text size="xs" variant="success" block style={{ marginTop: '0.25rem' }}>FL: {fastestLap}</Text>
|
|
</div>
|
|
|
|
{/* Points */}
|
|
<ResultPoints points={points} />
|
|
</ResultRow>
|
|
);
|
|
}
|