fix e2e

2026-01-05 19:35:49 +01:00
parent b4b915416b
commit d9e6151ae0
92 changed files with 10964 additions and 7893 deletions
--- a/apps/website/components/DriverTopThreePodium.tsx
+++ b/apps/website/components/DriverTopThreePodium.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Trophy, Medal, Crown } from 'lucide-react';
+import Image from 'next/image';
+import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+
+interface DriverTopThreePodiumProps {
+  drivers: DriverLeaderboardItemViewModel[];
+  onDriverClick: (id: string) => void;
+}
+
+export default function DriverTopThreePodium({ drivers, onDriverClick }: DriverTopThreePodiumProps) {
+  if (drivers.length < 3) return null;
+
+  const top3 = drivers.slice(0, 3) as [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel];
+
+  const podiumOrder: [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel] = [
+    top3[1],
+    top3[0],
+    top3[2],
+  ]; // 2nd, 1st, 3rd
+  const podiumHeights = ['h-32', 'h-40', 'h-24'];
+  const podiumColors = [
+    'from-gray-400/20 to-gray-500/10 border-gray-400/40',
+    'from-yellow-400/20 to-amber-500/10 border-yellow-400/40',
+    'from-amber-600/20 to-amber-700/10 border-amber-600/40',
+  ];
+  const crownColors = ['text-gray-300', 'text-yellow-400', 'text-amber-600'];
+  const positions = [2, 1, 3];
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-end justify-center gap-4 lg:gap-8">
+        {podiumOrder.map((driver, index) => {
+          const position = positions[index];
+
+          return (
+            <button
+              key={driver.id}
+              type="button"
+              onClick={() => onDriverClick(driver.id)}
+              className="flex flex-col items-center group"
+            >
+              {/* Driver Avatar & Info */}
+              <div className="relative mb-4">
+                {/* Crown for 1st place */}
+                {position === 1 && (
+                  <div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
+                    <Crown className="w-8 h-8 text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]" />
+                  </div>
+                )}
+
+                {/* Avatar */}
+                <div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
+                  <Image
+                    src={driver.avatarUrl}
+                    alt={driver.name}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+
+                {/* Position badge */}
+                <div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${podiumColors[index]} border-2 ${crownColors[index]}`}>
+                  {position}
+                </div>
+              </div>
+
+              {/* Driver Name */}
+              <p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
+                {driver.name}
+              </p>
+
+              {/* Rating */}
+              <p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
+                {driver.rating.toLocaleString()}
+              </p>
+
+              {/* Stats */}
+              <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
+                <span className="flex items-center gap-1">
+                  <Trophy className="w-3 h-3 text-performance-green" />
+                  {driver.wins}
+                </span>
+                <span>•</span>
+                <span className="flex items-center gap-1">
+                  <Medal className="w-3 h-3 text-warning-amber" />
+                  {driver.podiums}
+                </span>
+              </div>
+
+              {/* Podium Stand */}
+              <div className={`mt-4 w-28 lg:w-36 ${podiumHeights[index]} rounded-t-lg bg-gradient-to-t ${podiumColors[index]} border-t border-x flex items-end justify-center pb-4`}>
+                <span className={`text-4xl lg:text-5xl font-black ${crownColors[index]}`}>
+                  {position}
+                </span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}