289 lines
10 KiB
TypeScript
289 lines
10 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 { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
|
|
import { getLeagueCoverClasses } from '@/lib/leagueCovers';
|
|
import PlaceholderImage from '@/ui/PlaceholderImage';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
|
|
interface LeagueCardProps {
|
|
league: LeagueSummaryViewModel;
|
|
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 getCategoryLabel(category?: string): string {
|
|
if (!category) return '';
|
|
|
|
switch (category) {
|
|
case 'driver':
|
|
return 'Driver';
|
|
case 'team':
|
|
return 'Team';
|
|
case 'nations':
|
|
return 'Nations';
|
|
case 'trophy':
|
|
return 'Trophy';
|
|
case 'endurance':
|
|
return 'Endurance';
|
|
case 'sprint':
|
|
return 'Sprint';
|
|
default:
|
|
return category.charAt(0).toUpperCase() + category.slice(1);
|
|
}
|
|
}
|
|
|
|
function getCategoryColor(category?: string): string {
|
|
if (!category) return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
|
|
|
|
switch (category) {
|
|
case 'driver':
|
|
return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
|
|
case 'team':
|
|
return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
|
|
case 'nations':
|
|
return 'bg-green-500/20 text-green-400 border-green-500/30';
|
|
case 'trophy':
|
|
return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
|
|
case 'endurance':
|
|
return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
|
|
case 'sprint':
|
|
return 'bg-red-500/20 text-red-400 border-red-500/30';
|
|
default:
|
|
return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
|
|
}
|
|
}
|
|
|
|
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: string | Date): boolean {
|
|
const oneWeekAgo = new Date();
|
|
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
|
|
return new Date(createdAt) > oneWeekAgo;
|
|
}
|
|
|
|
export default function LeagueCard({ league, onClick }: LeagueCardProps) {
|
|
const coverUrl = getMediaUrl('league-cover', league.id);
|
|
const logoUrl = league.logoUrl;
|
|
|
|
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;
|
|
const categoryLabel = getCategoryLabel(league.category);
|
|
const categoryColorClass = getCategoryColor(league.category);
|
|
|
|
// 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">
|
|
<img
|
|
src={coverUrl}
|
|
alt={`${league.name} cover`}
|
|
className="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
{/* 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>
|
|
)}
|
|
{league.category && (
|
|
<span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold border ${categoryColorClass}`}>
|
|
{categoryLabel}
|
|
</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">
|
|
{logoUrl ? (
|
|
<img
|
|
src={logoUrl}
|
|
alt={`${league.name} logo`}
|
|
width={48}
|
|
height={48}
|
|
className="h-full w-full object-cover"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={48} />
|
|
)}
|
|
</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>
|
|
);
|
|
} |