47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { TrendingUp } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Box } from '@/ui/Box';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface CareerStatsProps {
|
|
stats: {
|
|
totalRaces: number;
|
|
wins: number;
|
|
podiums: number;
|
|
consistency: number | null;
|
|
};
|
|
}
|
|
|
|
export function CareerStats({ stats }: CareerStatsProps) {
|
|
return (
|
|
<Card>
|
|
<Box mb={4}>
|
|
<Heading level={2} icon={<Icon icon={TrendingUp} size={5} color="#10b981" />}>
|
|
Career Statistics
|
|
</Heading>
|
|
</Box>
|
|
<Grid cols={2} gap={4}>
|
|
<StatItem label="Races" value={stats.totalRaces} />
|
|
<StatItem label="Wins" value={stats.wins} color="text-performance-green" />
|
|
<StatItem label="Podiums" value={stats.podiums} color="text-warning-amber" />
|
|
<StatItem label="Consistency" value={`${stats.consistency}%`} color="text-primary-blue" />
|
|
</Grid>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
|
|
return (
|
|
<Box p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626', textAlign: 'center' }}>
|
|
<Text size="3xl" weight="bold" color={color as any} block mb={1}>{value}</Text>
|
|
<Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</Text>
|
|
</Box>
|
|
);
|
|
}
|