FODASSE QUE BORRAÇO

2025-10-25 23:16:38 +01:00
parent 2f641217ce
commit ede5003530
21 changed files with 2745 additions and 143 deletions
@@ -0,0 +1,146 @@
+// components/events/EventRegistrationForm.tsx
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function EventRegistrationForm({ eventId }: { eventId: number }) {
+  const router = useRouter();
+  const [formData, setFormData] = useState({
+    steamId: '',
+    carModel: '',
+    carSkin: '',
+    teamName: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setSuccess(false);
+
+    try {
+      const response = await fetch('/api/events/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          eventId,
+          ...formData,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Registration failed');
+      }
+
+      setSuccess(true);
+      setTimeout(() => {
+        router.refresh();
+      }, 1500);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* Steam ID */}
+      <div>
+        <label htmlFor="steamId" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
+          STEAM ID *
+        </label>
+        <input
+          type="text"
+          id="steamId"
+          required
+          value={formData.steamId}
+          onChange={(e) => setFormData({ ...formData, steamId: 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"
+          placeholder="76561198XXXXXXXXX"
+        />
+        <p className="text-xs text-white/40 mt-1">Your Steam ID from the database</p>
+      </div>
+
+      {/* Car Model */}
+      <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>
+      </div>
+
+      {/* Car Skin */}
+      <div>
+        <label htmlFor="carSkin" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
+          CAR SKIN
+        </label>
+        <input
+          type="text"
+          id="carSkin"
+          value={formData.carSkin}
+          onChange={(e) => setFormData({ ...formData, carSkin: 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"
+          placeholder="01_red_white (optional)"
+        />
+      </div>
+
+      {/* Team Name */}
+      <div>
+        <label htmlFor="teamName" className="block text-sm font-bold tracking-wider text-white/60 mb-2">
+          TEAM NAME
+        </label>
+        <input
+          type="text"
+          id="teamName"
+          value={formData.teamName}
+          onChange={(e) => setFormData({ ...formData, teamName: 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"
+          placeholder="Enter team name (optional)"
+        />
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className="border border-red-500/20 bg-red-500/10 p-4 text-red-400 text-sm">
+          {error}
+        </div>
+      )}
+
+      {/* Success Message */}
+      {success && (
+        <div className="border border-green-500/20 bg-green-500/10 p-4 text-green-400 text-sm">
+          Registration successful! Redirecting...
+        </div>
+      )}
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        disabled={loading || success}
+        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'}
+      </button>
+
+      <p className="text-xs text-white/40 text-center">
+        * Required fields
+      </p>
+    </form>
+  );
+}
@@ -0,0 +1,61 @@
+// components/InteractiveTopo.tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function InteractiveTopo() {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      // Normalize mouse position to percentage
+      const x = (e.clientX / window.innerWidth) * 100;
+      const y = (e.clientY / window.innerHeight) * 100;
+      setMousePosition({ x, y });
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return (
+    <div 
+      className="fixed inset-0 pointer-events-none z-0 opacity-30"
+      style={{
+        background: `
+          radial-gradient(
+            circle at ${mousePosition.x}% ${mousePosition.y}%,
+            rgba(255, 255, 255, 0.03) 0%,
+            transparent 50%
+          )
+        `,
+        transition: 'background 0.3s ease-out',
+      }}
+    >
+      {/* Animated grid that warps around mouse */}
+      <div 
+        className="absolute inset-0"
+        style={{
+          backgroundImage: `
+            repeating-linear-gradient(
+              0deg,
+              transparent,
+              transparent 50px,
+              rgba(255, 255, 255, 0.02) 50px,
+              rgba(255, 255, 255, 0.02) 51px
+            ),
+            repeating-linear-gradient(
+              90deg,
+              transparent,
+              transparent 50px,
+              rgba(255, 255, 255, 0.02) 50px,
+              rgba(255, 255, 255, 0.02) 51px
+            )
+          `,
+          transform: `translate(${(mousePosition.x - 50) * 0.02}px, ${(mousePosition.y - 50) * 0.02}px)`,
+          transition: 'transform 0.3s ease-out',
+        }}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,95 @@
+// components/Navbar.tsx
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function Navbar() {
+  const pathname = usePathname();
+
+  const isActive = (path: string) => {
+    if (path === '/') {
+      return pathname === path;
+    }
+    return pathname.startsWith(path);
+  };
+
+  return (
+    <nav className="border-b border-white/10 bg-[#0a0a0a]/80 backdrop-blur-xl sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo - links to home */}
+          <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
+            <img 
+              src="https://openwheels.racing/files/img/Openwheels_landscape.svg" 
+              alt="OpenWheels" 
+              className="h-6 hidden sm:block brightness-0 invert"
+            />
+          </Link>
+
+          {/* Nav Links */}
+          <div className="flex items-center space-x-1">
+            <Link 
+              href="/"
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                isActive('/') && pathname === '/'
+                  ? 'text-white border-b-2 border-white' 
+                  : 'text-white/50 hover:text-white'
+              }`}
+            >
+              HOME
+            </Link>
+            <Link 
+              href="/dashboard"
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                isActive('/dashboard')
+                  ? 'text-white border-b-2 border-white' 
+                  : 'text-white/50 hover:text-white'
+              }`}
+            >
+              DASHBOARD
+            </Link>
+            <Link 
+              href="/rankings"
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                isActive('/rankings')
+                  ? 'text-white border-b-2 border-white' 
+                  : 'text-white/50 hover:text-white'
+              }`}
+            >
+              RANKINGS
+            </Link>
+            <Link 
+              href="/events"
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                isActive('/events')
+                  ? 'text-white border-b-2 border-white' 
+                  : 'text-white/50 hover:text-white'
+              }`}
+            >
+              EVENTS
+            </Link>
+            <Link 
+              href="/live"
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                isActive('/live')
+                  ? 'text-white border-b-2 border-white' 
+                  : 'text-white/50 hover:text-white'
+              }`}
+            >
+              LIVE
+            </Link>
+            <a 
+              href="https://discord.gg/nvuB8EvT9P" 
+              target="_blank"
+              rel="noopener noreferrer"
+              className="ml-4 px-5 py-2 text-sm border border-white hover:bg-white hover:text-[#0a0a0a] transition-all"
+            >
+              DISCORD
+            </a>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,136 @@
+// components/ui/icons.tsx
+// Sharp, technical SVG icons for racing dashboard
+
+export function UsersIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" strokeLinecap="square" strokeLinejoin="miter"/>
+      <circle cx="9" cy="7" r="4" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function ServerIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <rect x="2" y="2" width="20" height="8" rx="0" strokeLinecap="square" strokeLinejoin="miter"/>
+      <rect x="2" y="14" width="20" height="8" rx="0" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="6" y1="6" x2="6.01" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="6" y1="18" x2="6.01" y2="18" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function ActivityIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function MapPinIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" strokeLinecap="square" strokeLinejoin="miter"/>
+      <circle cx="12" cy="10" r="3" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function FlagIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="4" y1="22" x2="4" y2="15" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function TrophyIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M4 22h16" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" strokeLinecap="square" strokeLinejoin="miter"/>
+      <path d="M18 2H6v7a6 6 0 0 0 12 0V2z" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function ChartIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <line x1="12" y1="20" x2="12" y2="10" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="18" y1="20" x2="18" y2="4" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="6" y1="20" x2="6" y2="16" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function CircleIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function LiveDotIcon({ className = "w-3 h-3" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 12 12" fill="currentColor">
+      <circle cx="6" cy="6" r="6"/>
+    </svg>
+  );
+}
+
+export function CalendarIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <rect x="3" y="4" width="18" height="18" rx="2" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="16" y1="2" x2="16" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="8" y1="2" x2="8" y2="6" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="3" y1="10" x2="21" y2="10" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function ChevronRightIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <polyline points="9 18 15 12 9 6" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function ChevronLeftIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <polyline points="15 18 9 12 15 6" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function ExternalLinkIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" strokeLinecap="square" strokeLinejoin="miter"/>
+      <polyline points="15 3 21 3 21 9" strokeLinecap="square" strokeLinejoin="miter"/>
+      <line x1="10" y1="14" x2="21" y2="3" strokeLinecap="square" strokeLinejoin="miter"/>
+    </svg>
+  );
+}
+
+export function ClockIcon({ className = "w-6 h-6" }: { className?: string }) {
+    return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <circle cx="12" cy="12" r="10" strokeLinecap="square" strokeLinejoin="miter"/>
+            <polyline points="12 6 12 12 16 14" strokeLinecap="square" strokeLinejoin="miter"/>
+        </svg>
+    );
+}
+