wip

apps/website/components/alpha/AlphaNav.tsx

@@ -9,6 +9,7 @@ import { useAuth } from '@/lib/auth/AuthContext';
 type AlphaNavProps = Record<string, never>;
 const nonHomeLinks = [
   { href: '/leagues', label: 'Leagues' },
+  { href: '/races', label: 'Races' },
   { href: '/teams', label: 'Teams' },
   { href: '/drivers', label: 'Drivers' },
   { href: '/leaderboards', label: 'Leaderboards' },

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>
   );

apps/website/components/ui/CountrySelect.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Globe, Search, ChevronDown, Check } from 'lucide-react';
+
+export interface Country {
+  code: string;
+  name: string;
+}
+
+export const COUNTRIES: Country[] = [
+  { code: 'US', name: 'United States' },
+  { code: 'GB', name: 'United Kingdom' },
+  { code: 'DE', name: 'Germany' },
+  { code: 'NL', name: 'Netherlands' },
+  { code: 'FR', name: 'France' },
+  { code: 'IT', name: 'Italy' },
+  { code: 'ES', name: 'Spain' },
+  { code: 'AU', name: 'Australia' },
+  { code: 'CA', name: 'Canada' },
+  { code: 'BR', name: 'Brazil' },
+  { code: 'JP', name: 'Japan' },
+  { code: 'BE', name: 'Belgium' },
+  { code: 'AT', name: 'Austria' },
+  { code: 'CH', name: 'Switzerland' },
+  { code: 'SE', name: 'Sweden' },
+  { code: 'NO', name: 'Norway' },
+  { code: 'DK', name: 'Denmark' },
+  { code: 'FI', name: 'Finland' },
+  { code: 'PL', name: 'Poland' },
+  { code: 'PT', name: 'Portugal' },
+  { code: 'CZ', name: 'Czech Republic' },
+  { code: 'HU', name: 'Hungary' },
+  { code: 'RU', name: 'Russia' },
+  { code: 'MX', name: 'Mexico' },
+  { code: 'AR', name: 'Argentina' },
+  { code: 'CL', name: 'Chile' },
+  { code: 'NZ', name: 'New Zealand' },
+  { code: 'ZA', name: 'South Africa' },
+  { code: 'IN', name: 'India' },
+  { code: 'KR', name: 'South Korea' },
+  { code: 'SG', name: 'Singapore' },
+  { code: 'MY', name: 'Malaysia' },
+  { code: 'TH', name: 'Thailand' },
+  { code: 'AE', name: 'United Arab Emirates' },
+  { code: 'SA', name: 'Saudi Arabia' },
+  { code: 'IE', name: 'Ireland' },
+  { code: 'GR', name: 'Greece' },
+  { code: 'TR', name: 'Turkey' },
+  { code: 'RO', name: 'Romania' },
+  { code: 'UA', name: 'Ukraine' },
+];
+
+function getCountryFlag(countryCode: string): string {
+  const code = countryCode.toUpperCase();
+  if (code.length === 2) {
+    const codePoints = [...code].map(char => 127397 + char.charCodeAt(0));
+    return String.fromCodePoint(...codePoints);
+  }
+  return '🏁';
+}
+
+interface CountrySelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export default function CountrySelect({
+  value,
+  onChange,
+  error,
+  errorMessage,
+  disabled,
+  placeholder = 'Select country',
+}: CountrySelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selectedCountry = COUNTRIES.find(c => c.code === value);
+
+  const filteredCountries = COUNTRIES.filter(country =>
+    country.name.toLowerCase().includes(search.toLowerCase()) ||
+    country.code.toLowerCase().includes(search.toLowerCase())
+  );
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSearch('');
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const handleSelect = (code: string) => {
+    onChange(code);
+    setIsOpen(false);
+    setSearch('');
+  };
+
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`flex items-center justify-between w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset transition-all duration-150 sm:text-sm ${
+          error
+            ? 'ring-warning-amber focus:ring-warning-amber'
+            : 'ring-charcoal-outline focus:ring-primary-blue'
+        } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:ring-gray-500'}`}
+      >
+        <div className="flex items-center gap-3">
+          <Globe className="w-4 h-4 text-gray-500" />
+          {selectedCountry ? (
+            <span className="flex items-center gap-2">
+              <span className="text-lg">{getCountryFlag(selectedCountry.code)}</span>
+              <span>{selectedCountry.name}</span>
+            </span>
+          ) : (
+            <span className="text-gray-500">{placeholder}</span>
+          )}
+        </div>
+        <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div className="absolute z-50 mt-2 w-full rounded-lg bg-iron-gray border border-charcoal-outline shadow-xl max-h-80 overflow-hidden">
+          {/* Search Input */}
+          <div className="p-2 border-b border-charcoal-outline">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search countries..."
+                className="w-full rounded-md border-0 px-4 py-2 pl-9 bg-deep-graphite text-white text-sm placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-primary-blue"
+              />
+            </div>
+          </div>
+
+          {/* Country List */}
+          <div className="overflow-y-auto max-h-60">
+            {filteredCountries.length > 0 ? (
+              filteredCountries.map((country) => (
+                <button
+                  key={country.code}
+                  type="button"
+                  onClick={() => handleSelect(country.code)}
+                  className={`flex items-center justify-between w-full px-4 py-2.5 text-left text-sm transition-colors ${
+                    value === country.code
+                      ? 'bg-primary-blue/20 text-white'
+                      : 'text-gray-300 hover:bg-deep-graphite'
+                  }`}
+                >
+                  <span className="flex items-center gap-3">
+                    <span className="text-lg">{getCountryFlag(country.code)}</span>
+                    <span>{country.name}</span>
+                  </span>
+                  {value === country.code && (
+                    <Check className="w-4 h-4 text-primary-blue" />
+                  )}
+                </button>
+              ))
+            ) : (
+              <div className="px-4 py-6 text-center text-gray-500 text-sm">
+                No countries found
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Error Message */}
+      {error && errorMessage && (
+        <p className="mt-2 text-sm text-warning-amber">{errorMessage}</p>
+      )}
+    </div>
+  );
+}