wip

apps/website/components/drivers/DriverCard.tsx

@@ -1,7 +1,7 @@
-import Image from 'next/image';
 import Card from '@/components/ui/Card';
 import RankBadge from '@/components/drivers/RankBadge';
-import { getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
+import DriverIdentity from '@/components/drivers/DriverIdentity';
+import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 
 export interface DriverCardProps {
   id: string;
@@ -29,6 +29,14 @@ export default function DriverCard(props: DriverCardProps) {
     onClick,
   } = props;
 
+  const driver: DriverDTO = {
+    id,
+    iracingId: '',
+    name,
+    country: nationality,
+    joinedAt: '',
+  };
+
   return (
     <Card
       className="hover:border-charcoal-outline/60 transition-colors cursor-pointer"
@@ -38,22 +46,12 @@ 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 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">
-            <h3 className="text-xl font-semibold text-white mb-1">{name}</h3>
-            <p className="text-sm text-gray-400">
-              {nationality} • {racesCompleted} races
-            </p>
-          </div>
+          <DriverIdentity
+            driver={driver}
+            href={`/drivers/${id}`}
+            meta={`${nationality} • ${racesCompleted} races`}
+            size="md"
+          />
         </div>
 
         <div className="flex items-center gap-8 text-center">