234 lines
8.4 KiB
TypeScript
234 lines
8.4 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import {
|
|
Trophy,
|
|
Users,
|
|
Flag,
|
|
Award,
|
|
Gamepad2,
|
|
Calendar,
|
|
ChevronRight,
|
|
Sparkles,
|
|
} from 'lucide-react';
|
|
import type { LeagueSummaryDTO } from '@gridpilot/racing/application/dto/LeagueSummaryDTO';
|
|
import { getLeagueCoverClasses } from '@/lib/leagueCovers';
|
|
import { getImageService } from '@/lib/di-container';
|
|
|
|
interface LeagueCardProps {
|
|
league: LeagueSummaryDTO;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
function getChampionshipIcon(type?: string) {
|
|
switch (type) {
|
|
case 'driver':
|
|
return Trophy;
|
|
case 'team':
|
|
return Users;
|
|
case 'nations':
|
|
return Flag;
|
|
case 'trophy':
|
|
return Award;
|
|
default:
|
|
return Trophy;
|
|
}
|
|
}
|
|
|
|
function getChampionshipLabel(type?: string) {
|
|
switch (type) {
|
|
case 'driver':
|
|
return 'Driver';
|
|
case 'team':
|
|
return 'Team';
|
|
case 'nations':
|
|
return 'Nations';
|
|
case 'trophy':
|
|
return 'Trophy';
|
|
default:
|
|
return 'Championship';
|
|
}
|
|
}
|
|
|
|
function getGameColor(gameId?: string): string {
|
|
switch (gameId) {
|
|
case 'iracing':
|
|
return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
|
|
case 'acc':
|
|
return 'bg-green-500/20 text-green-400 border-green-500/30';
|
|
case 'f1-23':
|
|
case 'f1-24':
|
|
return 'bg-red-500/20 text-red-400 border-red-500/30';
|
|
default:
|
|
return 'bg-primary-blue/20 text-primary-blue border-primary-blue/30';
|
|
}
|
|
}
|
|
|
|
function isNewLeague(createdAt: Date): boolean {
|
|
const oneWeekAgo = new Date();
|
|
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
|
|
return new Date(createdAt) > oneWeekAgo;
|
|
}
|
|
|
|
export default function LeagueCard({ league, onClick }: LeagueCardProps) {
|
|
const imageService = getImageService();
|
|
const coverUrl = imageService.getLeagueCover(league.id);
|
|
const logoUrl = imageService.getLeagueLogo(league.id);
|
|
|
|
const ChampionshipIcon = getChampionshipIcon(league.scoring?.primaryChampionshipType);
|
|
const championshipLabel = getChampionshipLabel(league.scoring?.primaryChampionshipType);
|
|
const gameColorClass = getGameColor(league.scoring?.gameId);
|
|
const isNew = isNewLeague(league.createdAt);
|
|
const isTeamLeague = league.maxTeams && league.maxTeams > 0;
|
|
|
|
// Calculate fill percentage - use teams for team leagues, drivers otherwise
|
|
const usedSlots = isTeamLeague ? (league.usedTeamSlots ?? 0) : (league.usedDriverSlots ?? 0);
|
|
const maxSlots = isTeamLeague ? (league.maxTeams ?? 0) : (league.maxDrivers ?? 0);
|
|
const fillPercentage = maxSlots > 0 ? (usedSlots / maxSlots) * 100 : 0;
|
|
const hasOpenSlots = maxSlots > 0 && usedSlots < maxSlots;
|
|
|
|
// Determine slot label based on championship type
|
|
const getSlotLabel = () => {
|
|
if (isTeamLeague) return 'Teams';
|
|
if (league.scoring?.primaryChampionshipType === 'nations') return 'Nations';
|
|
return 'Drivers';
|
|
};
|
|
const slotLabel = getSlotLabel();
|
|
|
|
return (
|
|
<div
|
|
className="group relative cursor-pointer h-full"
|
|
onClick={onClick}
|
|
>
|
|
{/* Card Container */}
|
|
<div className="relative h-full rounded-xl bg-iron-gray border border-charcoal-outline overflow-hidden transition-all duration-200 hover:border-primary-blue/50 hover:shadow-[0_0_30px_rgba(25,140,255,0.15)] hover:bg-iron-gray/80">
|
|
{/* Cover Image */}
|
|
<div className="relative h-32 overflow-hidden">
|
|
<Image
|
|
src={coverUrl}
|
|
alt={`${league.name} cover`}
|
|
fill
|
|
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
|
|
/>
|
|
{/* Gradient Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-iron-gray via-iron-gray/60 to-transparent" />
|
|
|
|
{/* Badges - Top Left */}
|
|
<div className="absolute top-3 left-3 flex items-center gap-2">
|
|
{isNew && (
|
|
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-performance-green/20 text-performance-green border border-performance-green/30">
|
|
<Sparkles className="w-3 h-3" />
|
|
NEW
|
|
</span>
|
|
)}
|
|
{league.scoring?.gameName && (
|
|
<span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold border ${gameColorClass}`}>
|
|
{league.scoring.gameName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Championship Type Badge - Top Right */}
|
|
<div className="absolute top-3 right-3">
|
|
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-deep-graphite/80 text-gray-300 border border-charcoal-outline">
|
|
<ChampionshipIcon className="w-3 h-3" />
|
|
{championshipLabel}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Logo */}
|
|
<div className="absolute left-4 -bottom-6 z-10">
|
|
<div className="w-12 h-12 rounded-lg overflow-hidden border-2 border-iron-gray bg-deep-graphite shadow-xl">
|
|
<Image
|
|
src={logoUrl}
|
|
alt={`${league.name} logo`}
|
|
width={48}
|
|
height={48}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="pt-8 px-4 pb-4 flex flex-col flex-1">
|
|
{/* Title & Description */}
|
|
<h3 className="text-base font-semibold text-white mb-1 line-clamp-1 group-hover:text-primary-blue transition-colors">
|
|
{league.name}
|
|
</h3>
|
|
<p className="text-xs text-gray-500 line-clamp-2 mb-3 h-8">
|
|
{league.description || 'No description available'}
|
|
</p>
|
|
|
|
{/* Stats Row */}
|
|
<div className="flex items-center gap-3 mb-3">
|
|
{/* Primary Slots (Drivers/Teams/Nations) */}
|
|
<div className="flex-1">
|
|
<div className="flex items-center justify-between text-[10px] text-gray-500 mb-1">
|
|
<span>{slotLabel}</span>
|
|
<span className="text-gray-400">
|
|
{usedSlots}/{maxSlots || '∞'}
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
|
|
<div
|
|
className={`h-full rounded-full transition-all ${
|
|
fillPercentage >= 90
|
|
? 'bg-warning-amber'
|
|
: fillPercentage >= 70
|
|
? 'bg-primary-blue'
|
|
: 'bg-performance-green'
|
|
}`}
|
|
style={{ width: `${Math.min(fillPercentage, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Open Slots Badge */}
|
|
{hasOpenSlots && (
|
|
<div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-neon-aqua/10 border border-neon-aqua/20">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-neon-aqua animate-pulse" />
|
|
<span className="text-[10px] text-neon-aqua font-medium">
|
|
{maxSlots - usedSlots} open
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Driver count for team leagues */}
|
|
{isTeamLeague && (
|
|
<div className="flex items-center gap-2 mb-3 text-[10px] text-gray-500">
|
|
<Users className="w-3 h-3" />
|
|
<span>
|
|
{league.usedDriverSlots ?? 0}/{league.maxDrivers ?? '∞'} drivers
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Spacer to push footer to bottom */}
|
|
<div className="flex-1" />
|
|
|
|
{/* Footer Info */}
|
|
<div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50 mt-auto">
|
|
<div className="flex items-center gap-3 text-[10px] text-gray-500">
|
|
{league.timingSummary && (
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="w-3 h-3" />
|
|
{league.timingSummary.split('•')[1]?.trim() || league.timingSummary}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* View Arrow */}
|
|
<div className="flex items-center gap-1 text-[10px] text-gray-500 group-hover:text-primary-blue transition-colors">
|
|
<span>View</span>
|
|
<ChevronRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |