71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Stack } from './Stack';
|
|
|
|
interface RankingListItemProps {
|
|
name: string;
|
|
type: 'overall' | 'league';
|
|
rank: number;
|
|
totalDrivers: number;
|
|
percentile: number;
|
|
rating: number;
|
|
}
|
|
|
|
export function RankingListItem({
|
|
name,
|
|
type,
|
|
rank,
|
|
totalDrivers,
|
|
percentile,
|
|
rating,
|
|
}: RankingListItemProps) {
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="between"
|
|
py={2}
|
|
px={3}
|
|
rounded="lg"
|
|
bg="bg-deep-graphite/60"
|
|
>
|
|
<Stack gap={0}>
|
|
<Text size="sm" weight="medium" color="text-white">
|
|
{name}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-400">
|
|
{type === 'overall' ? 'Overall' : 'League'} ranking
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Box display="flex" alignItems="center" gap={6} textAlign="right">
|
|
<Box>
|
|
<Text color="text-primary-blue" size="base" weight="semibold" block>
|
|
#{rank}
|
|
</Text>
|
|
<Text color="text-gray-500" size="xs" block>Position</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text color="text-white" size="sm" weight="semibold" block>
|
|
{totalDrivers}
|
|
</Text>
|
|
<Text color="text-gray-500" size="xs" block>Drivers</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text color="text-green-400" size="sm" weight="semibold" block>
|
|
{percentile.toFixed(1)}%
|
|
</Text>
|
|
<Text color="text-gray-500" size="xs" block>Percentile</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text color="text-warning-amber" size="sm" weight="semibold" block>
|
|
{rating}
|
|
</Text>
|
|
<Text color="text-gray-500" size="xs" block>Rating</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|