extract components from website
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user