124 lines
4.4 KiB
TypeScript
124 lines
4.4 KiB
TypeScript
import Image from 'next/image';
|
|
import { UserPlus, Users, Trophy } from 'lucide-react';
|
|
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
|
|
const SKILL_LEVELS: {
|
|
id: string;
|
|
label: string;
|
|
icon: React.ElementType;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
}[] = [
|
|
{
|
|
id: 'pro',
|
|
label: 'Pro',
|
|
icon: () => null, // We'll import Crown if needed
|
|
color: 'text-yellow-400',
|
|
bgColor: 'bg-yellow-400/10',
|
|
borderColor: 'border-yellow-400/30',
|
|
},
|
|
{
|
|
id: 'advanced',
|
|
label: 'Advanced',
|
|
icon: () => null,
|
|
color: 'text-purple-400',
|
|
bgColor: 'bg-purple-400/10',
|
|
borderColor: 'border-purple-400/30',
|
|
},
|
|
{
|
|
id: 'intermediate',
|
|
label: 'Intermediate',
|
|
icon: () => null,
|
|
color: 'text-primary-blue',
|
|
bgColor: 'bg-primary-blue/10',
|
|
borderColor: 'border-primary-blue/30',
|
|
},
|
|
{
|
|
id: 'beginner',
|
|
label: 'Beginner',
|
|
icon: () => null,
|
|
color: 'text-green-400',
|
|
bgColor: 'bg-green-400/10',
|
|
borderColor: 'border-green-400/30',
|
|
},
|
|
];
|
|
|
|
interface FeaturedRecruitingProps {
|
|
teams: TeamSummaryViewModel[];
|
|
onTeamClick: (id: string) => void;
|
|
}
|
|
|
|
export default function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
|
|
const recruitingTeams = teams.filter((t) => t.isRecruiting).slice(0, 4);
|
|
|
|
if (recruitingTeams.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mb-10">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-performance-green/10 border border-performance-green/20">
|
|
<UserPlus className="w-5 h-5 text-performance-green" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-white">Looking for Drivers</h2>
|
|
<p className="text-xs text-gray-500">Teams actively recruiting new members</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{recruitingTeams.map((team) => {
|
|
const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
|
|
|
|
return (
|
|
<button
|
|
key={team.id}
|
|
type="button"
|
|
onClick={() => onTeamClick(team.id)}
|
|
className="p-4 rounded-xl bg-iron-gray/60 border border-charcoal-outline hover:border-performance-green/40 transition-all duration-200 text-left group"
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
|
|
<Image
|
|
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
|
alt={team.name}
|
|
width={32}
|
|
height={32}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] bg-performance-green/10 text-performance-green border border-performance-green/20">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
|
|
Recruiting
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-white font-semibold mb-1 group-hover:text-performance-green transition-colors line-clamp-1">
|
|
{team.name}
|
|
</h3>
|
|
<p className="text-xs text-gray-500 line-clamp-2 mb-3">{team.description}</p>
|
|
|
|
<div className="flex items-center gap-2 text-xs text-gray-400 flex-wrap">
|
|
{team.category && (
|
|
<span className="flex items-center gap-1 text-purple-400">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
|
{team.category}
|
|
</span>
|
|
)}
|
|
<span className="flex items-center gap-1">
|
|
<Users className="w-3 h-3" />
|
|
{team.memberCount}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Trophy className="w-3 h-3" />
|
|
{team.totalWins} wins
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |