45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface StatItem {
|
|
label: string;
|
|
value: string | number;
|
|
subValue?: string;
|
|
color?: string;
|
|
}
|
|
|
|
interface DriverStatsPanelProps {
|
|
stats: StatItem[];
|
|
}
|
|
|
|
export function DriverStatsPanel({ stats }: DriverStatsPanelProps) {
|
|
return (
|
|
<Box display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
|
|
{stats.map((stat, index) => (
|
|
<Box key={index} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
|
|
{stat.label}
|
|
</Text>
|
|
<Box display="flex" alignItems="baseline" gap={1.5}>
|
|
<Text
|
|
size="2xl"
|
|
weight="bold"
|
|
font="mono"
|
|
color={stat.color || 'text-white'}
|
|
>
|
|
{stat.value}
|
|
</Text>
|
|
{stat.subValue && (
|
|
<Text size="xs" weight="bold" color="text-gray-600" font="mono">
|
|
{stat.subValue}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|