94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import Card from '../ui/Card';
|
|
import { getTeamLogoUrl } from '@/lib/racingLegacyFacade';
|
|
|
|
interface TeamCardProps {
|
|
id: string;
|
|
name: string;
|
|
logo?: string;
|
|
memberCount: number;
|
|
leagues: string[];
|
|
performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function TeamCard({
|
|
id,
|
|
name,
|
|
logo,
|
|
memberCount,
|
|
leagues,
|
|
performanceLevel,
|
|
onClick,
|
|
}: TeamCardProps) {
|
|
const performanceBadgeColors = {
|
|
beginner: 'bg-green-500/20 text-green-400',
|
|
intermediate: 'bg-blue-500/20 text-blue-400',
|
|
advanced: 'bg-purple-500/20 text-purple-400',
|
|
pro: 'bg-red-500/20 text-red-400',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
|
|
onClick={onClick}
|
|
>
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-16 h-16 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
|
|
<Image
|
|
src={logo || getTeamLogoUrl(id)}
|
|
alt={name}
|
|
width={64}
|
|
height={64}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-lg font-semibold text-white truncate">
|
|
{name}
|
|
</h3>
|
|
<p className="text-sm text-gray-400">
|
|
{memberCount} {memberCount === 1 ? 'member' : 'members'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{performanceLevel && (
|
|
<div>
|
|
<span
|
|
className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
|
|
performanceBadgeColors[performanceLevel]
|
|
}`}
|
|
>
|
|
{performanceLevel.charAt(0).toUpperCase() + performanceLevel.slice(1)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-gray-400">Active in:</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{leagues.slice(0, 3).map((league, idx) => (
|
|
<span
|
|
key={idx}
|
|
className="inline-block px-2 py-1 bg-charcoal-outline text-gray-300 rounded text-xs"
|
|
>
|
|
{league}
|
|
</span>
|
|
))}
|
|
{leagues.length > 3 && (
|
|
<span className="inline-block px-2 py-1 bg-charcoal-outline text-gray-400 rounded text-xs">
|
|
+{leagues.length - 3} more
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |