104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
|
|
import { Avatar } from '@/ui/Avatar';
|
|
import { Group } from '@/ui/Group';
|
|
import { Text } from '@/ui/Text';
|
|
import { DeltaChip } from './DeltaChip';
|
|
import { RankBadge } from './RankBadge';
|
|
import { LeaderboardRow } from '@/ui/LeaderboardRow';
|
|
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
|
|
import React from 'react';
|
|
|
|
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 (
|
|
<LeaderboardRow
|
|
onClick={onClick}
|
|
rank={
|
|
<Group gap={4}>
|
|
<RankBadge rank={rank} />
|
|
{rankDelta !== undefined && (
|
|
<DeltaChip value={rankDelta} type="rank" />
|
|
)}
|
|
</Group>
|
|
}
|
|
identity={
|
|
<Group gap={4}>
|
|
<Avatar
|
|
src={avatarUrl}
|
|
alt={name}
|
|
size="md"
|
|
/>
|
|
<Group direction="column" align="start" gap={0}>
|
|
<Text
|
|
weight="bold"
|
|
variant="high"
|
|
block
|
|
truncate
|
|
>
|
|
{name}
|
|
</Text>
|
|
<Group gap={2}>
|
|
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{nationality}</Text>
|
|
<Text size="xs" weight="bold" color={SkillLevelDisplay.getColor(skillLevel)} uppercase letterSpacing="wider">
|
|
{SkillLevelDisplay.getLabel(skillLevel)}
|
|
</Text>
|
|
</Group>
|
|
</Group>
|
|
</Group>
|
|
}
|
|
stats={
|
|
<Group gap={8}>
|
|
<Group direction="column" align="end" gap={0}>
|
|
<Text variant="low" font="mono" weight="bold" block size="md">
|
|
{racesCompleted}
|
|
</Text>
|
|
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
|
|
Races
|
|
</Text>
|
|
</Group>
|
|
<Group direction="column" align="end" gap={0}>
|
|
<Text variant="primary" font="mono" weight="bold" block size="md">
|
|
{RatingDisplay.format(rating)}
|
|
</Text>
|
|
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
|
|
Rating
|
|
</Text>
|
|
</Group>
|
|
<Group direction="column" align="end" gap={0}>
|
|
<Text variant="success" font="mono" weight="bold" block size="md">
|
|
{wins}
|
|
</Text>
|
|
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
|
|
Wins
|
|
</Text>
|
|
</Group>
|
|
</Group>
|
|
}
|
|
/>
|
|
);
|
|
}
|