92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import type { LeagueDTO } from '@gridpilot/racing/application/dto/LeagueDTO';
|
|
import Card from '../ui/Card';
|
|
import { getLeagueCoverClasses } from '@/lib/leagueCovers';
|
|
import { getImageService } from '@/lib/di-container';
|
|
|
|
interface LeagueCardProps {
|
|
league: LeagueDTO;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function LeagueCard({ league, onClick }: LeagueCardProps) {
|
|
const imageService = getImageService();
|
|
const coverUrl = imageService.getLeagueCover(league.id);
|
|
const logoUrl = imageService.getLeagueLogo(league.id);
|
|
|
|
return (
|
|
<div
|
|
className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
|
|
onClick={onClick}
|
|
>
|
|
<Card>
|
|
<div className="space-y-3">
|
|
<div className={getLeagueCoverClasses(league.id)} aria-hidden="true">
|
|
<div className="relative w-full h-full">
|
|
<Image
|
|
src={coverUrl}
|
|
alt={`${league.name} cover`}
|
|
fill
|
|
className="object-cover opacity-80"
|
|
sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
|
|
/>
|
|
<div className="absolute left-4 bottom-4 flex items-center">
|
|
<div className="w-10 h-10 rounded-full overflow-hidden border border-charcoal-outline/80 bg-deep-graphite/80 shadow-[0_0_10px_rgba(0,0,0,0.6)]">
|
|
<Image
|
|
src={logoUrl}
|
|
alt={`${league.name} logo`}
|
|
width={40}
|
|
height={40}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start justify-between">
|
|
<h3 className="text-xl font-semibold text-white">{league.name}</h3>
|
|
<span className="text-xs text-gray-500">
|
|
{new Date(league.createdAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-gray-400 text-sm line-clamp-2">
|
|
{league.description}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between pt-2 border-t border-charcoal-outline">
|
|
<div className="flex flex-col text-xs text-gray-500">
|
|
<span>
|
|
Owner:{' '}
|
|
<Link
|
|
href={`/drivers/${league.ownerId}?from=league&leagueId=${league.id}`}
|
|
className="text-primary-blue hover:underline"
|
|
>
|
|
{league.ownerId.slice(0, 8)}...
|
|
</Link>
|
|
</span>
|
|
<span className="mt-1 text-gray-400">
|
|
Slots:{' '}
|
|
<span className="text-white font-medium">
|
|
{typeof league.usedSlots === 'number' ? league.usedSlots : '—'}
|
|
</span>
|
|
{' / '}
|
|
<span className="text-gray-300">
|
|
{league.settings.maxDrivers ?? '—'}
|
|
</span>{' '}
|
|
used
|
|
</span>
|
|
</div>
|
|
<div className="text-xs text-primary-blue font-medium">
|
|
{league.settings.pointsSystem.toUpperCase()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |