wip

apps/website/components/alpha/DriverCard.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import Card from '../ui/Card';
+
+interface DriverCardProps {
+  id: string;
+  name: string;
+  avatar?: string;
+  rating: number;
+  skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
+  nationality?: string;
+  racesCompleted: number;
+  wins: number;
+  isActive?: boolean;
+  onClick?: () => void;
+}
+
+export default function DriverCard({
+  id,
+  name,
+  avatar,
+  rating,
+  skillLevel,
+  nationality,
+  racesCompleted,
+  wins,
+  isActive = true,
+  onClick,
+}: DriverCardProps) {
+  const skillBadgeColors = {
+    beginner: 'bg-green-500/20 text-green-400',
+    intermediate: 'bg-blue-500/20 text-blue-400',
+    advanced: 'bg-purple-500/20 text-purple-400',
+    pro: 'bg-red-500/20 text-red-400',
+  };
+
+  return (
+    <div
+      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
+      onClick={onClick}
+    >
+      <Card>
+        <div className="space-y-4">
+          <div className="flex items-start gap-4">
+            <div className="relative">
+              <div className="w-16 h-16 bg-charcoal-outline rounded-full flex items-center justify-center flex-shrink-0">
+                {avatar ? (
+                  <img
+                    src={avatar}
+                    alt={name}
+                    className="w-full h-full object-cover rounded-full"
+                  />
+                ) : (
+                  <span className="text-2xl font-bold text-gray-500">
+                    {name.charAt(0)}
+                  </span>
+                )}
+              </div>
+              {isActive && (
+                <div className="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-iron-gray rounded-full" />
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-semibold text-white truncate">
+                {name}
+              </h3>
+              {nationality && (
+                <p className="text-sm text-gray-400">{nationality}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <div className="text-2xl font-bold text-white">{rating}</div>
+              <div className="text-xs text-gray-400">Rating</div>
+            </div>
+            <div className="flex-1 text-center">
+              <div className="text-2xl font-bold text-white">{wins}</div>
+              <div className="text-xs text-gray-400">Wins</div>
+            </div>
+            <div className="flex-1 text-right">
+              <div className="text-2xl font-bold text-white">{racesCompleted}</div>
+              <div className="text-xs text-gray-400">Races</div>
+            </div>
+          </div>
+
+          <span
+            className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
+              skillBadgeColors[skillLevel]
+            }`}
+          >
+            {skillLevel.charAt(0).toUpperCase() + skillLevel.slice(1)}
+          </span>
+        </div>
+      </Card>
+    </div>
+  );
+}