mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/website/components/races/FinishDistributionChart.tsx
View File

@@ -1,45 +0,0 @@
import React from 'react';
interface FinishDistributionProps {
wins: number;
podiums: number;
topTen: number;
total: number;
}
export default function FinishDistributionChart({ wins, podiums, topTen, total }: FinishDistributionProps) {
const outsideTopTen = total - topTen;
const podiumsNotWins = podiums - wins;
const topTenNotPodium = topTen - podiums;
const segments = [
{ label: 'Wins', value: wins, color: 'bg-performance-green', textColor: 'text-performance-green' },
{ label: 'Podiums', value: podiumsNotWins, color: 'bg-warning-amber', textColor: 'text-warning-amber' },
{ label: 'Top 10', value: topTenNotPodium, color: 'bg-primary-blue', textColor: 'text-primary-blue' },
{ label: 'Other', value: outsideTopTen, color: 'bg-gray-600', textColor: 'text-gray-400' },
].filter(s => s.value > 0);
return (
<div className="space-y-3">
<div className="h-4 rounded-full overflow-hidden flex bg-charcoal-outline">
{segments.map((segment, index) => (
<div
key={segment.label}
className={`${segment.color} transition-all duration-500`}
style={{ width: `${(segment.value / total) * 100}%` }}
/>
))}
</div>
<div className="flex flex-wrap gap-4 justify-center">
{segments.map((segment) => (
<div key={segment.label} className="flex items-center gap-2">
<div className={`w-3 h-3 rounded-full ${segment.color}`} />
<span className={`text-xs ${segment.textColor}`}>
{segment.label}: {segment.value} ({((segment.value / total) * 100).toFixed(0)}%)
</span>
</div>
))}
</div>
</div>
);
}