117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { TableCell, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { RankMedal } from './RankMedal';
|
|
import { DeltaChip } from './DeltaChip';
|
|
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
|
|
|
|
interface RankingRowProps {
|
|
id: string;
|
|
rank: number;
|
|
rankDelta?: number;
|
|
name: string;
|
|
avatarUrl: string;
|
|
nationality: string;
|
|
skillLevel: string;
|
|
racesCompleted: number;
|
|
rating: number;
|
|
wins: number;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function RankingRow({
|
|
rank,
|
|
rankDelta,
|
|
name,
|
|
avatarUrl,
|
|
nationality,
|
|
skillLevel,
|
|
racesCompleted,
|
|
rating,
|
|
wins,
|
|
onClick,
|
|
}: RankingRowProps) {
|
|
return (
|
|
<TableRow
|
|
clickable={!!onClick}
|
|
onClick={onClick}
|
|
group
|
|
>
|
|
<TableCell>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Box w="8" display="flex" justifyContent="center">
|
|
<RankMedal rank={rank} size="md" />
|
|
</Box>
|
|
{rankDelta !== undefined && (
|
|
<Box w="10">
|
|
<DeltaChip value={rankDelta} type="rank" />
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box
|
|
position="relative"
|
|
w="10"
|
|
h="10"
|
|
rounded="full"
|
|
overflow="hidden"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
groupHoverBorderColor="primary-blue/50"
|
|
transition
|
|
>
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={name}
|
|
width={40}
|
|
height={40}
|
|
fullWidth
|
|
fullHeight
|
|
objectFit="cover"
|
|
/>
|
|
</Box>
|
|
<Box minWidth="0">
|
|
<Text
|
|
weight="semibold"
|
|
color="text-white"
|
|
block
|
|
truncate
|
|
groupHoverTextColor="text-primary-blue"
|
|
transition
|
|
>
|
|
{name}
|
|
</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={0.5}>
|
|
<Text size="xs" color="text-gray-500">{nationality}</Text>
|
|
<Box w="1" h="1" rounded="full" bg="bg-gray-700" />
|
|
<Text size="xs" color="text-gray-500">{skillLevel}</Text>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
</TableCell>
|
|
|
|
<TableCell textAlign="center">
|
|
<Text color="text-gray-400" font="mono">{racesCompleted}</Text>
|
|
</TableCell>
|
|
|
|
<TableCell textAlign="center">
|
|
<Text font="mono" weight="bold" color="text-primary-blue">
|
|
{RatingDisplay.format(rating)}
|
|
</Text>
|
|
</TableCell>
|
|
|
|
<TableCell textAlign="center">
|
|
<Text font="mono" weight="bold" color="text-performance-green">
|
|
{wins}
|
|
</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|