website refactor

apps/website/components/drivers/DriverCard.tsx

@@ -1,79 +0,0 @@
-import Card from '@/ui/Card';
-import RankBadge from '@/components/drivers/RankBadge';
-import { DriverIdentity } from '@/components/drivers/DriverIdentity';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-
-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 {
-    id,
-    name,
-    rating,
-    nationality,
-    racesCompleted,
-    wins,
-    podiums,
-    rank,
-    onClick,
-  } = props;
-
-  // Create a proper DriverViewModel instance
-  const driverViewModel = new DriverViewModel({
-    id,
-    name,
-    avatarUrl: null,
-  });
-
-  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" />
-
-          <DriverIdentity
-            driver={driverViewModel}
-            href={`/drivers/${id}`}
-            meta={`${nationality} • ${racesCompleted} races`}
-            size="md"
-          />
-        </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>
-  );
-}