wip

apps/website/components/drivers/DriverCard.tsx

@@ -1,5 +1,7 @@
+import Image from 'next/image';
 import Card from '@/components/ui/Card';
 import RankBadge from '@/components/drivers/RankBadge';
+import { getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
 
 export interface DriverCardProps {
   id: string;
@@ -16,6 +18,7 @@ export interface DriverCardProps {
 
 export default function DriverCard(props: DriverCardProps) {
   const {
+    id,
     name,
     rating,
     nationality,
@@ -35,8 +38,14 @@ export default function DriverCard(props: DriverCardProps) {
         <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 className="w-16 h-16 rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center">
+            <Image
+              src={getDriverAvatarUrl(id)}
+              alt={name}
+              width={64}
+              height={64}
+              className="w-full h-full object-cover"
+            />
           </div>
 
           <div className="flex-1">