Nice and stable before liveview

components/events/EventRegistrationForm.tsx

@@ -1,7 +1,7 @@
 // components/events/EventRegistrationForm.tsx
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 
 export default function EventRegistrationForm({ eventId }: { eventId: number }) {
@@ -12,10 +12,35 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
     carSkin: '',
     teamName: '',
   });
+  const [availableCars, setAvailableCars] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
+  const [loadingCars, setLoadingCars] = useState(true);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
 
+  // Fetch available cars on mount
+  useEffect(() => {
+    const fetchCars = async () => {
+      try {
+        const response = await fetch('/api/events/cars');
+        const data = await response.json();
+        
+        if (data.success) {
+          setAvailableCars(data.data);
+        } else {
+          setError('Failed to load available cars');
+        }
+      } catch (err) {
+        console.error('Error fetching cars:', err);
+        setError('Failed to load available cars');
+      } finally {
+        setLoadingCars(false);
+      }
+    };
+
+    fetchCars();
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -49,6 +74,13 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
     }
   };
 
+  // Format car name for display
+  const formatCarName = (carId: string) => {
+    return carId
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, char => char.toUpperCase());
+  };
+
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* Steam ID */}
@@ -68,21 +100,32 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
         <p className="text-xs text-white/40 mt-1">Your Steam ID from the database</p>
       </div>
 
-      {/* Car Model */}
+      {/* Car Model Dropdown */}
       <div>
         <label htmlFor="carModel" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
           CAR MODEL *
         </label>
-        <input
-          type="text"
-          id="carModel"
-          required
-          value={formData.carModel}
-          onChange={(e) => setFormData({ ...formData, carModel: e.target.value })}
-          className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors font-mono"
-          placeholder="ks_ferrari_488_gt3"
-        />
-        <p className="text-xs text-white/40 mt-1">Assetto Corsa car folder name</p>
+        {loadingCars ? (
+          <div className="w-full px-4 py-3 bg-black border border-white/20 text-white/40">
+            Loading available cars...
+          </div>
+        ) : (
+          <select
+            id="carModel"
+            required
+            value={formData.carModel}
+            onChange={(e) => setFormData({ ...formData, carModel: e.target.value })}
+            className="w-full px-4 py-3 bg-black border border-white/20 text-white focus:border-white focus:outline-none transition-colors cursor-pointer"
+          >
+            <option value="">Select a car</option>
+            {availableCars.map((car) => (
+              <option key={car} value={car}>
+                {formatCarName(car)}
+              </option>
+            ))}
+          </select>
+        )}
+        <p className="text-xs text-white/40 mt-1">Choose from available cars for this event</p>
       </div>
 
       {/* Car Skin */}
@@ -132,7 +175,7 @@ export default function EventRegistrationForm({ eventId }: { eventId: number })
       {/* Submit Button */}
       <button
         type="submit"
-        disabled={loading || success}
+        disabled={loading || success || loadingCars}
         className="w-full px-6 py-4 border border-white hover:bg-white hover:text-black transition-all text-sm font-bold tracking-wider disabled:opacity-50 disabled:cursor-not-allowed"
       >
         {loading ? 'REGISTERING...' : success ? 'REGISTERED!' : 'REGISTER NOW'}