123 lines
5.1 KiB
TypeScript
123 lines
5.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Medal } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Image } from '@/ui/Image';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface Driver {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
rank: number;
|
|
nationality: string;
|
|
skillLevel: string;
|
|
racesCompleted: number;
|
|
rating: number;
|
|
wins: number;
|
|
medalBg?: string;
|
|
medalColor?: string;
|
|
}
|
|
|
|
interface RankingsTableProps {
|
|
drivers: Driver[];
|
|
onDriverClick?: (id: string) => void;
|
|
}
|
|
|
|
export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
|
|
return (
|
|
<Box style={{ borderRadius: '0.75rem', backgroundColor: 'rgba(38, 38, 38, 0.3)', border: '1px solid #262626', overflow: 'hidden' }}>
|
|
{/* Table Header */}
|
|
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(12, minmax(0, 1fr))', gap: '1rem', padding: '0.75rem 1rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderBottom: '1px solid #262626', fontSize: '0.75rem', fontWeight: 500, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
|
<Box style={{ gridColumn: 'span 1', textAlign: 'center' }}>Rank</Box>
|
|
<Box style={{ gridColumn: 'span 5' }}>Driver</Box>
|
|
<Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Races</Box>
|
|
<Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Rating</Box>
|
|
<Box style={{ gridColumn: 'span 2', textAlign: 'center' }}>Wins</Box>
|
|
</Box>
|
|
|
|
{/* Table Body */}
|
|
<Stack gap={0}>
|
|
{drivers.map((driver, index) => {
|
|
const position = driver.rank;
|
|
|
|
return (
|
|
<Box
|
|
key={driver.id}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => onDriverClick?.(driver.id)}
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
|
|
gap: '1rem',
|
|
padding: '1rem',
|
|
width: '100%',
|
|
textAlign: 'left',
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
borderBottom: index < drivers.length - 1 ? '1px solid rgba(38, 38, 38, 0.5)' : 'none'
|
|
}}
|
|
>
|
|
{/* Position */}
|
|
<Box style={{ gridColumn: 'span 1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Box style={{ display: 'flex', height: '2.25rem', width: '2.25rem', alignItems: 'center', justifyContent: 'center', borderRadius: '9999px', fontSize: '0.875rem', fontWeight: 'bold', border: '1px solid #262626', backgroundColor: driver.medalBg, color: driver.medalColor }}>
|
|
{position <= 3 ? <Icon icon={Medal} size={4} /> : position}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Driver Info */}
|
|
<Box style={{ gridColumn: 'span 5', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<Box style={{ position: 'relative', width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: '2px solid #262626' }}>
|
|
<Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
|
</Box>
|
|
<Box style={{ minWidth: 0 }}>
|
|
<Text weight="semibold" color="text-white" block truncate>
|
|
{driver.name}
|
|
</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={1}>
|
|
<Text size="xs" color="text-gray-500">{driver.nationality}</Text>
|
|
<Text size="xs" color="text-gray-500">{driver.skillLevel}</Text>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Races */}
|
|
<Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text color="text-gray-400">{driver.racesCompleted}</Text>
|
|
</Box>
|
|
|
|
{/* Rating */}
|
|
<Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text font="mono" weight="semibold" color="text-white">
|
|
{driver.rating.toString()}
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Wins */}
|
|
<Box style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text font="mono" weight="semibold" color="text-performance-green">
|
|
{driver.wins}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Stack>
|
|
|
|
{/* Empty State */}
|
|
{drivers.length === 0 && (
|
|
<Box style={{ padding: '4rem 0', textAlign: 'center' }}>
|
|
<Text size="4xl" block mb={4}>🔍</Text>
|
|
<Text color="text-gray-400" block mb={2}>No drivers found</Text>
|
|
<Text size="sm" color="text-gray-500">There are no drivers in the system yet</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|