wip

apps/website/components/drivers/DriverCard.tsx

@@ -0,0 +1,73 @@
+import Card from '@/components/ui/Card';
+import RankBadge from '@/components/drivers/RankBadge';
+
+export interface DriverCardProps {
+  id: string;
+  name: string;
+  rating: number;
+  skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
+  nationality: string;
+  racesCompleted: number;
+  wins: number;
+  podiums: number;
+  rank: number;
+  onClick?: () => void;
+}
+
+export default function DriverCard(props: DriverCardProps) {
+  const {
+    name,
+    rating,
+    nationality,
+    racesCompleted,
+    wins,
+    podiums,
+    rank,
+    onClick,
+  } = props;
+
+  return (
+    <Card
+      className="hover:border-charcoal-outline/60 transition-colors cursor-pointer"
+      onClick={onClick}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4 flex-1">
+          <RankBadge rank={rank} size="lg" />
+
+          <div className="w-16 h-16 rounded-full bg-primary-blue/20 flex items-center justify-center text-2xl font-bold text-white">
+            {name.charAt(0)}
+          </div>
+
+          <div className="flex-1">
+            <h3 className="text-xl font-semibold text-white mb-1">{name}</h3>
+            <p className="text-sm text-gray-400">
+              {nationality} • {racesCompleted} races
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-8 text-center">
+          <div>
+            <div className="text-2xl font-bold text-primary-blue">{rating}</div>
+            <div className="text-xs text-gray-400">Rating</div>
+          </div>
+          <div>
+            <div className="text-2xl font-bold text-green-400">{wins}</div>
+            <div className="text-xs text-gray-400">Wins</div>
+          </div>
+          <div>
+            <div className="text-2xl font-bold text-warning-amber">{podiums}</div>
+            <div className="text-xs text-gray-400">Podiums</div>
+          </div>
+          <div>
+            <div className="text-sm text-gray-400">
+              {racesCompleted > 0 ? ((wins / racesCompleted) * 100).toFixed(0) : '0'}%
+            </div>
+            <div className="text-xs text-gray-500">Win Rate</div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}