wip

apps/website/app/drivers/page.tsx

@@ -2,15 +2,17 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import DriverCard from '@/components/drivers/DriverCard';
 import RankBadge from '@/components/drivers/RankBadge';
 import Input from '@/components/ui/Input';
 import Card from '@/components/ui/Card';
+import { getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
 
 // Mock data (fictional demo drivers only)
 const MOCK_DRIVERS = [
   {
-    id: '1',
+    id: 'driver-1',
     name: 'Alex Vermeer',
     rating: 3245,
     skillLevel: 'pro' as const,
@@ -22,7 +24,7 @@ const MOCK_DRIVERS = [
     rank: 1,
   },
   {
-    id: '2',
+    id: 'driver-2',
     name: 'Liam Hartmann',
     rating: 3198,
     skillLevel: 'pro' as const,
@@ -34,7 +36,7 @@ const MOCK_DRIVERS = [
     rank: 2,
   },
   {
-    id: '3',
+    id: 'driver-3',
     name: 'Michael Schmidt',
     rating: 2912,
     skillLevel: 'advanced' as const,
@@ -46,7 +48,7 @@ const MOCK_DRIVERS = [
     rank: 3,
   },
   {
-    id: '4',
+    id: 'driver-4',
     name: 'Emma Thompson',
     rating: 2789,
     skillLevel: 'advanced' as const,
@@ -58,7 +60,7 @@ const MOCK_DRIVERS = [
     rank: 5,
   },
   {
-    id: '5',
+    id: 'driver-5',
     name: 'Sarah Chen',
     rating: 2456,
     skillLevel: 'advanced' as const,
@@ -70,7 +72,7 @@ const MOCK_DRIVERS = [
     rank: 8,
   },
   {
-    id: '6',
+    id: 'driver-6',
     name: 'Isabella Rossi',
     rating: 2145,
     skillLevel: 'intermediate' as const,
@@ -82,7 +84,7 @@ const MOCK_DRIVERS = [
     rank: 12,
   },
   {
-    id: '7',
+    id: 'driver-7',
     name: 'Carlos Rodriguez',
     rating: 1876,
     skillLevel: 'intermediate' as const,
@@ -94,7 +96,7 @@ const MOCK_DRIVERS = [
     rank: 18,
   },
   {
-    id: '8',
+    id: 'driver-8',
     name: 'Yuki Tanaka',
     rating: 1234,
     skillLevel: 'beginner' as const,
@@ -258,9 +260,15 @@ export default function DriversPage() {
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-4 flex-1">
                 <RankBadge rank={driver.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">
-                  {driver.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(driver.id)}
+                    alt={driver.name}
+                    width={64}
+                    height={64}
+                    className="w-full h-full object-cover"
+                  />
                 </div>
 
                 <div className="flex-1">