wip

apps/website/components/teams/TeamLadderRow.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { getImageService } from '@/lib/di-container';
+
+export interface TeamLadderRowProps {
+  rank: number;
+  teamId: string;
+  teamName: string;
+  teamLogoUrl?: string;
+  memberCount: number;
+  teamRating: number | null;
+  totalWins: number;
+  totalRaces: number;
+}
+
+export default function TeamLadderRow({
+  rank,
+  teamId,
+  teamName,
+  teamLogoUrl,
+  memberCount,
+  teamRating,
+  totalWins,
+  totalRaces,
+}: TeamLadderRowProps) {
+  const router = useRouter();
+  const imageService = getImageService();
+  const logo = teamLogoUrl ?? imageService.getTeamLogo(teamId);
+
+  const handleClick = () => {
+    router.push(`/teams/${teamId}`);
+  };
+
+  return (
+    <tr
+      onClick={handleClick}
+      className="cursor-pointer border-b border-charcoal-outline/60 hover:bg-iron-gray/30 transition-colors"
+    >
+      <td className="py-3 px-4 text-sm text-gray-300 font-semibold">#{rank}</td>
+      <td className="py-3 px-4">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-md overflow-hidden bg-charcoal-outline flex-shrink-0">
+            <Image
+              src={logo}
+              alt={teamName}
+              width={32}
+              height={32}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="flex flex-col">
+            <span className="text-sm font-semibold text-white truncate">
+              {teamName}
+            </span>
+          </div>
+        </div>
+      </td>
+      <td className="py-3 px-4 text-sm">
+        <span className="text-primary-blue font-semibold">
+          {teamRating !== null ? Math.round(teamRating) : '—'}
+        </span>
+      </td>
+      <td className="py-3 px-4 text-sm">
+        <span className="text-green-400 font-semibold">{totalWins}</span>
+      </td>
+      <td className="py-3 px-4 text-sm">
+        <span className="text-white">{totalRaces}</span>
+      </td>
+      <td className="py-3 px-4 text-sm">
+        <span className="text-gray-300">
+          {memberCount} {memberCount === 1 ? 'member' : 'members'}
+        </span>
+      </td>
+    </tr>
+  );
+}