35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Stack } from './Stack';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
interface DriverStatsProps {
|
|
rating: number;
|
|
wins: number;
|
|
podiums: number;
|
|
winRate: string;
|
|
}
|
|
|
|
export function DriverStats({ rating, wins, podiums, winRate }: DriverStatsProps) {
|
|
return (
|
|
<Stack direction="row" align="center" gap={8} textAlign="center">
|
|
<Box>
|
|
<Text size="2xl" weight="bold" color="text-primary-blue" block>{rating}</Text>
|
|
<Text size="xs" color="text-gray-400" block>Rating</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text size="2xl" weight="bold" color="text-green-400" block>{wins}</Text>
|
|
<Text size="xs" color="text-gray-400" block>Wins</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text size="2xl" weight="bold" color="text-warning-amber" block>{podiums}</Text>
|
|
<Text size="xs" color="text-gray-400" block>Podiums</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text size="sm" color="text-gray-400" block>{winRate}%</Text>
|
|
<Text size="xs" color="text-gray-500" block>Win Rate</Text>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|