87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
interface DriverPerformanceOverviewProps {
|
|
stats: {
|
|
wins: number;
|
|
podiums: number;
|
|
totalRaces: number;
|
|
consistency: number;
|
|
dnfs: number;
|
|
bestFinish: number;
|
|
avgFinish: number;
|
|
};
|
|
}
|
|
|
|
export function DriverPerformanceOverview({ stats }: DriverPerformanceOverviewProps) {
|
|
const winRate = stats.totalRaces > 0 ? (stats.wins / stats.totalRaces) * 100 : 0;
|
|
const podiumRate = stats.totalRaces > 0 ? (stats.podiums / stats.totalRaces) * 100 : 0;
|
|
|
|
const metrics = [
|
|
{ label: 'Win Rate', value: `${winRate.toFixed(1)}%`, color: 'text-performance-green' },
|
|
{ label: 'Podium Rate', value: `${podiumRate.toFixed(1)}%`, color: 'text-warning-amber' },
|
|
{ label: 'Best Finish', value: `P${stats.bestFinish}`, color: 'text-white' },
|
|
{ label: 'Avg Finish', value: `P${stats.avgFinish.toFixed(1)}`, color: 'text-gray-400' },
|
|
{ label: 'Consistency', value: `${stats.consistency}%`, color: 'text-neon-aqua' },
|
|
{ label: 'DNFs', value: stats.dnfs, color: 'text-red-500' },
|
|
];
|
|
|
|
return (
|
|
<Box display="flex" flexDirection="col" gap={6} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50" p={6}>
|
|
<Heading level={3}>Performance Overview</Heading>
|
|
|
|
<Box display="grid" gridCols={{ base: 2, md: 3, lg: 6 }} gap={6}>
|
|
{metrics.map((metric, index) => (
|
|
<Box key={index} display="flex" flexDirection="col" gap={1}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
|
|
{metric.label}
|
|
</Text>
|
|
<Text size="xl" weight="bold" font="mono" color={metric.color}>
|
|
{metric.value}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
{/* Visual Progress Bars */}
|
|
<Box display="flex" flexDirection="col" gap={4} mt={2}>
|
|
<Box display="flex" flexDirection="col" gap={2}>
|
|
<Box display="flex" justifyContent="between" alignItems="center">
|
|
<Text size="xs" weight="bold" color="text-gray-400">Win Rate</Text>
|
|
<Text size="xs" weight="bold" font="mono" color="text-performance-green">{winRate.toFixed(1)}%</Text>
|
|
</Box>
|
|
<Box h="1.5" w="full" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
|
|
<Box
|
|
h="full"
|
|
bg="bg-performance-green"
|
|
shadow="shadow-[0_0_8px_rgba(34,197,94,0.4)]"
|
|
transition
|
|
width={`${winRate}%`}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box display="flex" flexDirection="col" gap={2}>
|
|
<Box display="flex" justifyContent="between" alignItems="center">
|
|
<Text size="xs" weight="bold" color="text-gray-400">Podium Rate</Text>
|
|
<Text size="xs" weight="bold" font="mono" color="text-warning-amber">{podiumRate.toFixed(1)}%</Text>
|
|
</Box>
|
|
<Box h="1.5" w="full" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
|
|
<Box
|
|
h="full"
|
|
bg="bg-warning-amber"
|
|
shadow="shadow-[0_0_8px_rgba(255,190,77,0.4)]"
|
|
transition
|
|
width={`${podiumRate}%`}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|