extract components from website

apps/website/components/races/LiveRaceBanner.tsx

@@ -0,0 +1,51 @@
+import { ChevronRight, PlayCircle } from 'lucide-react';
+
+interface LiveRaceBannerProps {
+  liveRaces: Array<{
+    id: string;
+    track: string;
+    leagueName: string;
+  }>;
+  onRaceClick?: (raceId: string) => void;
+  className?: string;
+}
+
+export function LiveRaceBanner({ liveRaces, onRaceClick, className }: LiveRaceBannerProps) {
+  if (liveRaces.length === 0) return null;
+
+  return (
+    <div className={`relative overflow-hidden rounded-xl bg-gradient-to-r from-performance-green/20 via-performance-green/10 to-transparent border border-performance-green/30 p-6 ${className || ''}`}>
+      <div className="absolute top-0 right-0 w-32 h-32 bg-performance-green/20 rounded-full blur-2xl animate-pulse" />
+
+      <div className="relative z-10">
+        <div className="flex items-center gap-2 mb-4">
+          <div className="flex items-center gap-2 px-3 py-1 bg-performance-green/20 rounded-full">
+            <span className="w-2 h-2 bg-performance-green rounded-full animate-pulse" />
+            <span className="text-performance-green font-semibold text-sm">LIVE NOW</span>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          {liveRaces.map((race) => (
+            <div
+              key={race.id}
+              onClick={() => onRaceClick?.(race.id)}
+              className="flex items-center justify-between p-4 bg-deep-graphite/80 rounded-lg border border-performance-green/20 cursor-pointer hover:border-performance-green/40 transition-all"
+            >
+              <div className="flex items-center gap-4">
+                <div className="p-2 bg-performance-green/20 rounded-lg">
+                  <PlayCircle className="w-5 h-5 text-performance-green" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-white">{race.track}</h3>
+                  <p className="text-sm text-gray-400">{race.leagueName}</p>
+                </div>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/races/QuickActions.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link';
+import { Users, Trophy, ChevronRight } from 'lucide-react';
+
+export function QuickActions({ className }: { className?: string }) {
+  return (
+    <div className={className}>
+      <h3 className="font-semibold text-white mb-4">Quick Actions</h3>
+      <div className="space-y-2">
+        <Link
+          href="/leagues"
+          className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
+        >
+          <div className="p-2 bg-primary-blue/10 rounded-lg">
+            <Users className="w-4 h-4 text-primary-blue" />
+          </div>
+          <span className="text-sm text-white">Browse Leagues</span>
+          <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
+        </Link>
+        <Link
+          href="/leaderboards"
+          className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-charcoal-outline/50 transition-colors"
+        >
+          <div className="p-2 bg-warning-amber/10 rounded-lg">
+            <Trophy className="w-4 h-4 text-warning-amber" />
+          </div>
+          <span className="text-sm text-white">View Leaderboards</span>
+          <ChevronRight className="w-4 h-4 text-gray-500 ml-auto" />
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/website/components/races/RaceCard.tsx

@@ -1,185 +1,98 @@
-'use client';
-
-import { Race } from '@core/racing/domain/entities/Race';
-import { Clock, PlayCircle, CheckCircle2, XCircle, Zap, Car, Trophy } from 'lucide-react';
+import Link from 'next/link';
+import { ChevronRight, Car, Zap, Trophy, ArrowRight } from 'lucide-react';
+import { formatTime, getRelativeTime } from '@/lib/utilities/time';
+import { raceStatusConfig } from '@/lib/utilities/raceStatus';
 
 interface RaceCardProps {
-  race: Race;
-  leagueName?: string;
+  race: {
+    id: string;
+    track: string;
+    car: string;
+    scheduledAt: string;
+    status: string;
+    leagueId?: string;
+    leagueName: string;
+    strengthOfField?: number | null;
+  };
   onClick?: () => void;
-  compact?: boolean;
+  className?: string;
 }
 
-export default function RaceCard({ race, leagueName, onClick, compact = false }: RaceCardProps) {
-  const statusConfig = {
-    scheduled: {
-      icon: Clock,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
-      label: 'Scheduled',
-    },
-    running: {
-      icon: PlayCircle,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
-      label: 'LIVE',
-    },
-    completed: {
-      icon: CheckCircle2,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
-      label: 'Completed',
-    },
-    cancelled: {
-      icon: XCircle,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
-      label: 'Cancelled',
-    },
-  };
-
-  const config = statusConfig[race.status];
-  const StatusIcon = config.icon;
-
-  const formatDate = (date: Date) => {
-    return new Date(date).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date) => {
-    return new Date(date).toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-      timeZoneName: 'short',
-    });
-  };
-
-  const getRelativeTime = (date: Date) => {
-    const now = new Date();
-    const targetDate = new Date(date);
-    const diffMs = targetDate.getTime() - now.getTime();
-    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-    if (diffMs < 0) return null;
-    if (diffHours < 1) return 'Starting soon';
-    if (diffHours < 24) return `In ${diffHours}h`;
-    if (diffDays === 1) return 'Tomorrow';
-    if (diffDays < 7) return `In ${diffDays} days`;
-    return null;
-  };
-
-  const relativeTime = race.status === 'scheduled' ? getRelativeTime(race.scheduledAt) : null;
-
-  if (compact) {
-    return (
-      <div
-        onClick={onClick}
-        className={`
-          relative overflow-hidden p-4 rounded-lg bg-iron-gray border ${config.border}
-          transition-all duration-200
-          ${onClick ? 'cursor-pointer hover:scale-[1.02] hover:border-primary-blue' : ''}
-        `}
-      >
-        {race.status === 'running' && (
-          <div className="absolute top-0 left-0 right-0 h-0.5 bg-performance-green animate-pulse" />
-        )}
-        <div className="flex items-center gap-3">
-          <div className="flex-shrink-0">
-            <StatusIcon className={`w-5 h-5 ${config.color}`} />
-          </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="text-sm font-medium text-white truncate">{race.track}</h3>
-            <p className="text-xs text-gray-500">{formatTime(race.scheduledAt)}</p>
-          </div>
-          {relativeTime && (
-            <span className={`text-xs ${config.color}`}>{relativeTime}</span>
-          )}
-        </div>
-      </div>
-    );
-  }
+export function RaceCard({ race, onClick, className }: RaceCardProps) {
+  const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig];
 
   return (
     <div
       onClick={onClick}
-      className={`
-        relative overflow-hidden p-5 rounded-xl bg-iron-gray border ${config.border}
-        transition-all duration-200
-        ${onClick ? 'cursor-pointer hover:scale-[1.02] hover:border-primary-blue' : ''}
-      `}
+      className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue ${className || ''}`}
     >
-      {/* Live indicator bar */}
+      {/* Live indicator */}
       {race.status === 'running' && (
         <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
       )}
 
-      <div className="flex items-start justify-between gap-4">
-        {/* Left side - Race info */}
+      <div className="flex items-start gap-4">
+        {/* Time Column */}
+        <div className="flex-shrink-0 text-center min-w-[60px]">
+          <p className="text-lg font-bold text-white">
+            {formatTime(race.scheduledAt)}
+          </p>
+          <p className={`text-xs ${config.color}`}>
+            {race.status === 'running'
+              ? 'LIVE'
+              : getRelativeTime(race.scheduledAt)}
+          </p>
+        </div>
+
+        {/* Divider */}
+        <div className={`w-px self-stretch ${config.bg}`} />
+
+        {/* Main Content */}
         <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-2">
-            <h3 className="text-lg font-semibold text-white truncate">{race.track}</h3>
-            {/* Status badge */}
-            <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${config.bg} border ${config.border} flex-shrink-0`}>
-              {race.status === 'running' && (
-                <span className="w-1.5 h-1.5 bg-performance-green rounded-full animate-pulse" />
-              )}
-              <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
+                {race.track}
+              </h3>
+              <div className="flex items-center gap-3 mt-1">
+                <span className="flex items-center gap-1 text-sm text-gray-400">
+                  <Car className="w-3.5 h-3.5" />
+                  {race.car}
+                </span>
+                {race.strengthOfField && (
+                  <span className="flex items-center gap-1 text-sm text-gray-400">
+                    <Zap className="w-3.5 h-3.5 text-warning-amber" />
+                    SOF {race.strengthOfField}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Status Badge */}
+            <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
+              <config.icon className={`w-3.5 h-3.5 ${config.color}`} />
               <span className={`text-xs font-medium ${config.color}`}>
                 {config.label}
               </span>
             </div>
           </div>
-          
-          {/* Meta info */}
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400">
-            <span className="flex items-center gap-1.5">
-              <Car className="w-3.5 h-3.5" />
-              {race.car}
-            </span>
-            {race.strengthOfField && (
-              <span className="flex items-center gap-1.5 text-warning-amber">
-                <Zap className="w-3.5 h-3.5" />
-                SOF {race.strengthOfField}
-              </span>
-            )}
-            {leagueName && (
-              <span className="flex items-center gap-1.5 text-primary-blue">
-                <Trophy className="w-3.5 h-3.5" />
-                {leagueName}
-              </span>
-            )}
+
+          {/* League Link */}
+          <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
+            <Link
+              href={`/leagues/${race.leagueId ?? ''}`}
+              onClick={(e) => e.stopPropagation()}
+              className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
+            >
+              <Trophy className="w-3.5 h-3.5" />
+              {race.leagueName}
+              <ArrowRight className="w-3 h-3" />
+            </Link>
           </div>
         </div>
 
-        {/* Right side - Date/Time */}
-        <div className="text-right flex-shrink-0">
-          <p className="text-white font-medium">{formatDate(race.scheduledAt)}</p>
-          <p className="text-gray-500 text-sm">{formatTime(race.scheduledAt)}</p>
-          {relativeTime && (
-            <p className={`text-sm mt-1 ${config.color}`}>{relativeTime}</p>
-          )}
-        </div>
-      </div>
-
-      {/* Bottom row */}
-      <div className="flex items-center justify-between mt-3 pt-3 border-t border-charcoal-outline/50">
-        <span className="text-xs text-gray-500 uppercase tracking-wide">
-          {race.sessionType}
-        </span>
-        {race.registeredCount !== undefined && (
-          <span className="text-xs text-gray-500">
-            {race.registeredCount} registered
-            {race.maxParticipants && ` / ${race.maxParticipants}`}
-          </span>
-        )}
+        {/* Arrow */}
+        <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
       </div>
     </div>
   );

apps/website/components/races/RaceResultsHeader.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Calendar, Trophy, Users, Zap } from 'lucide-react';
+
+interface RaceResultsHeaderProps {
+  raceTrack?: string;
+  raceScheduledAt?: string;
+  totalDrivers?: number;
+  leagueName?: string;
+  raceSOF?: number | null;
+}
+
+const DEFAULT_RACE_TRACK = 'Race';
+
+export default function RaceResultsHeader({
+  raceTrack = 'Race',
+  raceScheduledAt,
+  totalDrivers,
+  leagueName,
+  raceSOF
+}: RaceResultsHeaderProps) {
+  return (
+    <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">
+          {raceTrack || DEFAULT_RACE_TRACK} Results
+        </h1>
+
+        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
+          {raceScheduledAt && (
+            <span className="flex items-center gap-2">
+              <Calendar className="w-4 h-4" />
+              {new Date(raceScheduledAt).toLocaleDateString('en-US', {
+                weekday: 'short',
+                month: 'short',
+                day: 'numeric',
+              })}
+            </span>
+          )}
+          {totalDrivers !== undefined && totalDrivers !== null && (
+            <span className="flex items-center gap-2">
+              <Users className="w-4 h-4" />
+              {totalDrivers} drivers classified
+            </span>
+          )}
+          {leagueName && <span className="text-primary-blue">{leagueName}</span>}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/components/races/RaceStats.tsx

@@ -0,0 +1,46 @@
+import { CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
+
+interface RaceStatsProps {
+  stats: {
+    total: number;
+    scheduled: number;
+    running: number;
+    completed: number;
+  };
+  className?: string;
+}
+
+export function RaceStats({ stats, className }: RaceStatsProps) {
+  return (
+    <div className={`relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 ${className || ''}`}>
+      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+        <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
+          <CalendarDays className="w-4 h-4" />
+          <span>Total</span>
+        </div>
+        <p className="text-2xl font-bold text-white">{stats.total}</p>
+      </div>
+      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+        <div className="flex items-center gap-2 text-primary-blue text-sm mb-1">
+          <Clock className="w-4 h-4" />
+          <span>Scheduled</span>
+        </div>
+        <p className="text-2xl font-bold text-white">{stats.scheduled}</p>
+      </div>
+      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+        <div className="flex items-center gap-2 text-performance-green text-sm mb-1">
+          <Zap className="w-4 h-4" />
+          <span>Live Now</span>
+        </div>
+        <p className="text-2xl font-bold text-white">{stats.running}</p>
+      </div>
+      <div className="bg-deep-graphite/60 backdrop-blur rounded-xl p-4 border border-charcoal-outline/50">
+        <div className="flex items-center gap-2 text-gray-400 text-sm mb-1">
+          <Trophy className="w-4 h-4" />
+          <span>Completed</span>
+        </div>
+        <p className="text-2xl font-bold text-white">{stats.completed}</p>
+      </div>
+    </div>
+  );
+}

apps/website/components/races/RaceStewardingStats.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { CheckCircle, Clock, Gavel } from 'lucide-react';
+
+interface RaceStewardingStatsProps {
+  pendingCount: number;
+  resolvedCount: number;
+  penaltiesCount: number;
+}
+
+export default function RaceStewardingStats({ pendingCount, resolvedCount, penaltiesCount }: RaceStewardingStatsProps) {
+  return (
+    <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">{pendingCount}</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">{resolvedCount}</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">{penaltiesCount}</div>
+      </div>
+    </div>
+  );
+}

apps/website/components/races/SidebarRaceItem.tsx

@@ -0,0 +1,34 @@
+import { ChevronRight } from 'lucide-react';
+import { formatTime, formatDate } from '@/lib/utilities/time';
+
+interface SidebarRaceItemProps {
+  race: {
+    id: string;
+    track: string;
+    scheduledAt: string;
+  };
+  onClick?: () => void;
+  className?: string;
+}
+
+export function SidebarRaceItem({ race, onClick, className }: SidebarRaceItemProps) {
+  const scheduledAtDate = new Date(race.scheduledAt);
+
+  return (
+    <div
+      onClick={onClick}
+      className={`flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite cursor-pointer transition-colors ${className || ''}`}
+    >
+      <div className="flex-shrink-0 w-10 h-10 bg-primary-blue/10 rounded-lg flex items-center justify-center">
+        <span className="text-sm font-bold text-primary-blue">
+          {scheduledAtDate.getDate()}
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-white truncate">{race.track}</p>
+        <p className="text-xs text-gray-500">{formatTime(scheduledAtDate)}</p>
+      </div>
+      <ChevronRight className="w-4 h-4 text-gray-500" />
+    </div>
+  );
+}