79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useServices } from '@/lib/services/ServiceProvider';
|
|
import { useRouter } from 'next/navigation';
|
|
import Image from 'next/image';
|
|
|
|
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 { mediaService } = useServices();
|
|
const logo = teamLogoUrl ?? mediaService.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>
|
|
);
|
|
}
|