website refactor

apps/website/components/drivers/DriverCard.tsx

@@ -1,70 +1,66 @@
-import { DriverIdentity } from '@/ui/DriverIdentity';
-import { DriverStats } from '@/components/drivers/DriverStats';
-import { RankBadge } from '@/components/leaderboards/RankBadge';
-import { routes } from '@/lib/routing/RouteConfig';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+'use client';
 
-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;
+import { DriverIdentity } from '@/ui/DriverIdentity';
+import { ProfileCard } from '@/ui/ProfileCard';
+import { StatGrid } from '@/ui/StatGrid';
+import { Badge } from '@/ui/Badge';
+import { Flag, Trophy, Medal } from 'lucide-react';
+
+interface DriverCardProps {
+  driver: {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    rating: number;
+    ratingLabel: string;
+    nationality: string;
+    racesCompleted: number;
+    wins: number;
+    podiums: number;
+    rank: number;
+  };
+  onClick: (id: string) => void;
 }
 
-export function DriverCard(props: DriverCardProps) {
-  const {
-    id,
-    name,
-    rating,
-    nationality,
-    racesCompleted,
-    wins,
-    podiums,
-    rank,
-    onClick,
-  } = props;
-
-  // Create a proper DriverViewModel instance
-  const driverViewModel = new DriverViewModel({
-    id,
-    name,
-    avatarUrl: null,
-  });
-
-  const winRate = racesCompleted > 0 ? ((wins / racesCompleted) * 100).toFixed(0) : '0';
+export function DriverCard({ driver, onClick }: DriverCardProps) {
+  const stats = [
+    { label: 'Races', value: driver.racesCompleted, intent: 'low', icon: Flag },
+    { label: 'Wins', value: driver.wins, intent: 'primary', icon: Trophy },
+    { label: 'Podiums', value: driver.podiums, intent: 'warning', icon: Medal },
+  ];
 
   return (
-    <Card
-      onClick={onClick}
-      transition
-    >
-      <Stack direction="row" align="center" justify="between">
-        <Stack direction="row" align="center" gap={4} flexGrow={1}>
-          <RankBadge rank={rank} size="lg" />
-
-          <DriverIdentity
-            driver={driverViewModel}
-            href={routes.driver.detail(id)}
-            meta={`${nationality} • ${racesCompleted} races`}
-            size="md"
-          />
-        </Stack>
-
-        <DriverStats
-          rating={rating}
-          wins={wins}
-          podiums={podiums}
-          winRate={winRate}
+    <ProfileCard
+      onClick={() => onClick(driver.id)}
+      variant="muted"
+      identity={
+        <DriverIdentity
+          driver={{
+            id: driver.id,
+            name: driver.name,
+            avatarUrl: driver.avatarUrl || null,
+          }}
+          contextLabel={`Rank #${driver.rank}`}
+          meta={driver.nationality}
         />
-      </Stack>
-    </Card>
+      }
+      actions={
+        <Badge variant="outline" size="sm">
+          {driver.ratingLabel}
+        </Badge>
+      }
+      stats={
+        <StatGrid
+          stats={stats.map(s => ({
+            label: s.label,
+            value: s.value,
+            intent: s.intent as any,
+            icon: s.icon
+          }))}
+          columns={3}
+          variant="box"
+        />
+      }
+    />
   );
 }