wip

apps/website/components/races/RaceCard.tsx

@@ -1,20 +1,50 @@
 'use client';
 
 import { Race } from '@gridpilot/racing/domain/entities/Race';
+import { Clock, PlayCircle, CheckCircle2, XCircle, Zap, Car, Trophy } from 'lucide-react';
 
 interface RaceCardProps {
   race: Race;
   leagueName?: string;
   onClick?: () => void;
+  compact?: boolean;
 }
 
-export default function RaceCard({ race, leagueName, onClick }: RaceCardProps) {
-  const statusColors = {
-    scheduled: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
-    completed: 'bg-green-500/20 text-green-400 border-green-500/30',
-    cancelled: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+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',
@@ -35,52 +65,121 @@ export default function RaceCard({ race, leagueName, onClick }: RaceCardProps) {
     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 (diffDays < 0) return null;
-    if (diffDays === 0) return 'Today';
+    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`;
+    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>
+    );
+  }
+
   return (
     <div
       onClick={onClick}
       className={`
-        p-6 rounded-lg bg-iron-gray border border-charcoal-outline 
+        relative overflow-hidden p-5 rounded-xl bg-iron-gray border ${config.border}
         transition-all duration-200
-        ${onClick ? 'cursor-pointer hover:scale-[1.03] hover:border-primary-blue' : ''}
+        ${onClick ? 'cursor-pointer hover:scale-[1.02] hover:border-primary-blue' : ''}
       `}
     >
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex-1">
-          <div className="flex items-center gap-3 mb-2">
-            <h3 className="text-lg font-semibold text-white">{race.track}</h3>
-            <span className={`px-2 py-1 text-xs font-medium rounded border ${statusColors[race.status]}`}>
-              {race.status.charAt(0).toUpperCase() + race.status.slice(1)}
-            </span>
+      {/* Live indicator bar */}
+      {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-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}`} />
+              <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>
+            )}
           </div>
-          <p className="text-gray-400 text-sm">{race.car}</p>
-          {leagueName && (
-            <p className="text-gray-500 text-xs mt-1">{leagueName}</p>
-          )}
         </div>
-        <div className="text-right">
-          <p className="text-white font-medium text-sm">{formatDate(race.scheduledAt)}</p>
-          <p className="text-gray-400 text-xs">{formatTime(race.scheduledAt)}</p>
+
+        {/* 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-primary-blue text-xs mt-1">{relativeTime}</p>
+            <p className={`text-sm mt-1 ${config.color}`}>{relativeTime}</p>
           )}
         </div>
       </div>
 
-      <div className="flex items-center justify-between">
+      {/* 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>
+        )}
       </div>
     </div>
   );