74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { TableRow, TableCell } from './Table';
|
|
import { Image } from './Image';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
export interface TeamLadderRowProps {
|
|
rank: number;
|
|
teamId: string;
|
|
teamName: string;
|
|
logoUrl: string;
|
|
memberCount: number;
|
|
teamRating: number | null;
|
|
totalWins: number;
|
|
totalRaces: number;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function TeamLadderRow({
|
|
rank,
|
|
teamName,
|
|
logoUrl,
|
|
memberCount,
|
|
teamRating,
|
|
totalWins,
|
|
totalRaces,
|
|
onClick,
|
|
}: TeamLadderRowProps) {
|
|
return (
|
|
<TableRow
|
|
onClick={onClick}
|
|
clickable
|
|
>
|
|
<TableCell>
|
|
<Text size="sm" color="text-gray-300" weight="semibold">#{rank}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box w="8" h="8" rounded="md" overflow="hidden" bg="bg-deep-graphite" flexShrink={0}>
|
|
<Image
|
|
src={logoUrl}
|
|
alt={teamName}
|
|
width={32}
|
|
height={32}
|
|
objectFit="cover"
|
|
/>
|
|
</Box>
|
|
<Box display="flex" flexDirection="col">
|
|
<Text size="sm" weight="semibold" color="text-white" truncate block>
|
|
{teamName}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-primary-blue" weight="semibold">
|
|
{teamRating !== null ? Math.round(teamRating) : '—'}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-performance-green" weight="semibold">{totalWins}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-white">{totalRaces}</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text color="text-gray-300">
|
|
{memberCount} {memberCount === 1 ? 'member' : 'members'}
|
|
</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|