105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { SkillLevelHeader } from '@/components/drivers/SkillLevelHeader';
|
|
import { TeamCard } from '@/components/teams/TeamCardWrapper';
|
|
import { TeamGrid } from '@/components/teams/TeamGrid';
|
|
import { Box } from '@/ui/Box';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
|
type TeamSpecialization = 'endurance' | 'sprint' | 'mixed';
|
|
|
|
interface SkillLevelConfig {
|
|
id: SkillLevel;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
description: string;
|
|
}
|
|
|
|
interface SkillLevelSectionProps {
|
|
level: SkillLevelConfig;
|
|
teams: Array<{
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
logoUrl?: string;
|
|
memberCount: number;
|
|
rating?: number;
|
|
totalWins: number;
|
|
totalRaces: number;
|
|
performanceLevel: string;
|
|
isRecruiting: boolean;
|
|
specialization?: string;
|
|
region?: string;
|
|
languages: string[];
|
|
category?: string;
|
|
}>;
|
|
onTeamClick: (id: string) => void;
|
|
defaultExpanded?: boolean;
|
|
}
|
|
|
|
export function SkillLevelSection({
|
|
level,
|
|
teams,
|
|
onTeamClick,
|
|
defaultExpanded = false
|
|
}: SkillLevelSectionProps) {
|
|
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
|
|
const recruitingTeams = teams.filter((t) => t.isRecruiting);
|
|
const displayedTeams = isExpanded ? teams : teams.slice(0, 3);
|
|
|
|
if (teams.length === 0) return null;
|
|
|
|
const specialization = (teamSpecialization: string | undefined): TeamSpecialization | undefined => {
|
|
if (teamSpecialization === 'endurance' || teamSpecialization === 'sprint' || teamSpecialization === 'mixed') {
|
|
return teamSpecialization;
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
return (
|
|
<Box mb={8}>
|
|
<SkillLevelHeader
|
|
label={level.label}
|
|
icon={level.icon}
|
|
bgColor={level.bgColor}
|
|
borderColor={level.borderColor}
|
|
color={level.color}
|
|
description={level.description}
|
|
teamCount={teams.length}
|
|
recruitingCount={recruitingTeams.length}
|
|
isExpanded={isExpanded}
|
|
onToggle={() => setIsExpanded(!isExpanded)}
|
|
showToggle={teams.length > 3}
|
|
/>
|
|
|
|
<TeamGrid>
|
|
{displayedTeams.map((team) => (
|
|
<TeamCard
|
|
key={team.id}
|
|
id={team.id}
|
|
name={team.name}
|
|
description={team.description ?? ''}
|
|
logo={team.logoUrl}
|
|
memberCount={team.memberCount}
|
|
rating={team.rating}
|
|
totalWins={team.totalWins}
|
|
totalRaces={team.totalRaces}
|
|
performanceLevel={team.performanceLevel as SkillLevel}
|
|
isRecruiting={team.isRecruiting}
|
|
specialization={specialization(team.specialization)}
|
|
region={team.region ?? ''}
|
|
languages={team.languages}
|
|
category={team.category}
|
|
onClick={() => onTeamClick(team.id)}
|
|
/>
|
|
))}
|
|
</TeamGrid>
|
|
</Box>
|
|
);
|
|
}
|