82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import Card from '../ui/Card';
|
|
|
|
interface PerformanceMetricsProps {
|
|
stats: {
|
|
winRate: number;
|
|
podiumRate: number;
|
|
dnfRate: number;
|
|
avgFinish: number;
|
|
consistency: number;
|
|
bestFinish: number;
|
|
worstFinish: number;
|
|
};
|
|
}
|
|
|
|
export default function PerformanceMetrics({ stats }: PerformanceMetricsProps) {
|
|
const getPerformanceColor = (value: number, type: 'rate' | 'finish' | 'consistency') => {
|
|
if (type === 'rate') {
|
|
if (value >= 30) return 'text-green-400';
|
|
if (value >= 15) return 'text-warning-amber';
|
|
return 'text-gray-300';
|
|
}
|
|
if (type === 'consistency') {
|
|
if (value >= 80) return 'text-green-400';
|
|
if (value >= 60) return 'text-warning-amber';
|
|
return 'text-gray-300';
|
|
}
|
|
return 'text-white';
|
|
};
|
|
|
|
const metrics = [
|
|
{
|
|
label: 'Win Rate',
|
|
value: `${stats.winRate.toFixed(1)}%`,
|
|
color: getPerformanceColor(stats.winRate, 'rate'),
|
|
icon: '🏆'
|
|
},
|
|
{
|
|
label: 'Podium Rate',
|
|
value: `${stats.podiumRate.toFixed(1)}%`,
|
|
color: getPerformanceColor(stats.podiumRate, 'rate'),
|
|
icon: '🥇'
|
|
},
|
|
{
|
|
label: 'DNF Rate',
|
|
value: `${stats.dnfRate.toFixed(1)}%`,
|
|
color: stats.dnfRate < 10 ? 'text-green-400' : 'text-danger-red',
|
|
icon: '❌'
|
|
},
|
|
{
|
|
label: 'Avg Finish',
|
|
value: stats.avgFinish.toFixed(1),
|
|
color: 'text-white',
|
|
icon: '📊'
|
|
},
|
|
{
|
|
label: 'Consistency',
|
|
value: `${stats.consistency.toFixed(0)}%`,
|
|
color: getPerformanceColor(stats.consistency, 'consistency'),
|
|
icon: '🎯'
|
|
},
|
|
{
|
|
label: 'Best / Worst',
|
|
value: `${stats.bestFinish} / ${stats.worstFinish}`,
|
|
color: 'text-gray-300',
|
|
icon: '📈'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
{metrics.map((metric, index) => (
|
|
<Card key={index} className="text-center">
|
|
<div className="text-2xl mb-2">{metric.icon}</div>
|
|
<div className="text-sm text-gray-400 mb-1">{metric.label}</div>
|
|
<div className={`text-xl font-bold ${metric.color}`}>{metric.value}</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
} |