49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Stack } from './Stack';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Badge } from './Badge';
|
|
import { Grid } from './Grid';
|
|
import { StatItem } from './StatItem';
|
|
|
|
interface StandingsItemProps {
|
|
leagueName: string;
|
|
position: number;
|
|
points: number;
|
|
wins: number;
|
|
racesCompleted: number;
|
|
}
|
|
|
|
export function StandingsItem({
|
|
leagueName,
|
|
position,
|
|
points,
|
|
wins,
|
|
racesCompleted,
|
|
}: StandingsItemProps) {
|
|
return (
|
|
<Box
|
|
bg="bg-iron-gray/50"
|
|
rounded="lg"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
p={4}
|
|
>
|
|
<Stack direction="row" align="center" justify="between" mb={3}>
|
|
<Heading level={4}>
|
|
{leagueName}
|
|
</Heading>
|
|
<Badge variant="primary">
|
|
P{position}
|
|
</Badge>
|
|
</Stack>
|
|
|
|
<Grid cols={3} gap={4}>
|
|
<StatItem label="Points" value={points} align="center" />
|
|
<StatItem label="Wins" value={wins} align="center" />
|
|
<StatItem label="Races" value={racesCompleted} align="center" />
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|