extract components from website

This commit is contained in:
2025-12-21 13:55:31 +01:00
parent 13d8563feb
commit b52474d792
65 changed files with 3234 additions and 1361 deletions

View File

@@ -3,6 +3,7 @@
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import QuickPenaltyModal from '@/components/leagues/QuickPenaltyModal';
import ImportResultsForm from '@/components/races/ImportResultsForm';
import RaceResultsHeader from '@/components/races/RaceResultsHeader';
import ResultsTable from '@/components/races/ResultsTable';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
@@ -132,50 +133,13 @@ export default function RaceResultsPage() {
</Button>
</div>
<div className="relative overflow-hidden rounded-2xl bg-gray-500/10 border border-gray-500/30 p-6 sm:p-8">
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-4">
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30">
<Trophy className="w-4 h-4 text-performance-green" />
<span className="text-sm font-semibold text-performance-green">
Final Results
</span>
</div>
{raceSOF && (
<span className="flex items-center gap-1.5 text-warning-amber text-sm">
<Zap className="w-4 h-4" />
SOF {raceSOF}
</span>
)}
</div>
<h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">
{raceData?.race?.track ?? 'Race'} Results
</h1>
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
{raceData?.race && (
<>
<span className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
{new Date(raceData.race.scheduledAt).toLocaleDateString('en-US', {
weekday: 'short',
month: 'short',
day: 'numeric',
})}
</span>
<span className="flex items-center gap-2">
<Users className="w-4 h-4" />
{raceData.stats.totalDrivers} drivers classified
</span>
</>
)}
{raceData?.league && <span className="text-primary-blue">{raceData.league.name}</span>}
</div>
</div>
</div>
<RaceResultsHeader
raceTrack={raceData?.race?.track}
raceScheduledAt={raceData?.race?.scheduledAt}
totalDrivers={raceData?.stats.totalDrivers}
leagueName={raceData?.league?.name}
raceSOF={raceSOF}
/>
{importSuccess && (
<div className="p-4 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">

View File

@@ -1,6 +1,7 @@
'use client';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import RaceStewardingStats from '@/components/races/RaceStewardingStats';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
@@ -154,29 +155,11 @@ export default function RaceStewardingPage() {
</div>
{/* Stats */}
<div className="grid grid-cols-3 gap-4">
<div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
<div className="flex items-center gap-2 text-warning-amber mb-1">
<Clock className="w-4 h-4" />
<span className="text-xs font-medium uppercase">Pending</span>
</div>
<div className="text-2xl font-bold text-white">{stewardingData?.pendingCount ?? 0}</div>
</div>
<div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
<div className="flex items-center gap-2 text-performance-green mb-1">
<CheckCircle className="w-4 h-4" />
<span className="text-xs font-medium uppercase">Resolved</span>
</div>
<div className="text-2xl font-bold text-white">{stewardingData?.resolvedCount ?? 0}</div>
</div>
<div className="rounded-lg bg-deep-graphite/50 border border-charcoal-outline p-4">
<div className="flex items-center gap-2 text-red-400 mb-1">
<Gavel className="w-4 h-4" />
<span className="text-xs font-medium uppercase">Penalties</span>
</div>
<div className="text-2xl font-bold text-white">{stewardingData?.penaltiesCount ?? 0}</div>
</div>
</div>
<RaceStewardingStats
pendingCount={stewardingData?.pendingCount ?? 0}
resolvedCount={stewardingData?.resolvedCount ?? 0}
penaltiesCount={stewardingData?.penaltiesCount ?? 0}
/>
</Card>
{/* Tab Navigation */}