website refactor

apps/website/components/races/RaceResultCard.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { ChevronRight } from 'lucide-react';
-import { RaceResultViewModel } from '@/lib/view-models/RaceResultViewModel';
-
-interface RaceResultCardProps {
-  race: {
-    id: string;
-    track: string;
-    car: string;
-    scheduledAt: string;
-  };
-  result: RaceResultViewModel;
-  league?: {
-    name: string;
-  };
-  showLeague?: boolean;
-}
-
-export default function RaceResultCard({
-  race,
-  result,
-  league,
-  showLeague = true,
-}: RaceResultCardProps) {
-  
-  const getPositionColor = (position: number) => {
-    if (position === 1) return 'bg-green-400/20 text-green-400';
-    if (position === 2) return 'bg-gray-400/20 text-gray-400';
-    if (position === 3) return 'bg-warning-amber/20 text-warning-amber';
-    return 'bg-charcoal-outline text-gray-400';
-  };
-
-  return (
-    <Link
-      href={`/races/${race.id}`}
-      className="block p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors group"
-    >
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-3">
-          <div className={`w-8 h-8 rounded flex items-center justify-center font-bold text-sm ${getPositionColor(result.position)}`}>
-            P{result.position}
-          </div>
-          <div>
-            <div className="text-white font-medium group-hover:text-primary-blue transition-colors">
-              {race.track}
-            </div>
-            <div className="text-sm text-gray-400">{race.car}</div>
-          </div>
-        </div>
-        <div className="flex items-center gap-3">
-          <div className="text-right">
-            <div className="text-sm text-gray-400">
-              {new Date(race.scheduledAt).toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-                year: 'numeric',
-              })}
-            </div>
-            {showLeague && league && (
-              <div className="text-xs text-gray-500">{league.name}</div>
-            )}
-          </div>
-          <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors" />
-        </div>
-      </div>
-      <div className="flex items-center gap-4 text-xs text-gray-500">
-        <span>Started P{result.startPosition}</span>
-        <span>•</span>
-        <span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
-          {result.incidents}x incidents
-        </span>
-        {result.position < result.startPosition && (
-          <>
-            <span>•</span>
-            <span className="text-green-400">
-              +{result.startPosition - result.position} positions
-            </span>
-          </>
-        )}
-      </div>
-    </Link>
-  );
-}