136 lines
3.9 KiB
TypeScript
136 lines
3.9 KiB
TypeScript
import { TeamCard as UiTeamCard } from '@/components/teams/TeamCard';
|
|
import { TeamStatItem } from '@/components/teams/TeamStatItem';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import {
|
|
Clock,
|
|
Crown,
|
|
Languages,
|
|
Shield,
|
|
Star,
|
|
TrendingUp,
|
|
Zap
|
|
} from 'lucide-react';
|
|
|
|
interface TeamCardProps {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
logo?: string;
|
|
memberCount: number;
|
|
rating?: number | null;
|
|
totalWins?: number;
|
|
totalRaces?: number;
|
|
performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
|
|
isRecruiting?: boolean;
|
|
specialization?: 'endurance' | 'sprint' | 'mixed' | undefined;
|
|
region?: string;
|
|
languages?: string[] | undefined;
|
|
leagues?: string[];
|
|
category?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
function getPerformanceBadge(level?: string) {
|
|
switch (level) {
|
|
case 'pro':
|
|
return { icon: Crown, label: 'Pro', variant: 'warning' as const };
|
|
case 'advanced':
|
|
return { icon: Star, label: 'Advanced', variant: 'primary' as const };
|
|
case 'intermediate':
|
|
return { icon: TrendingUp, label: 'Intermediate', variant: 'info' as const };
|
|
case 'beginner':
|
|
return { icon: Shield, label: 'Beginner', variant: 'success' as const };
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function getSpecializationBadge(specialization?: string) {
|
|
switch (specialization) {
|
|
case 'endurance':
|
|
return { icon: Clock, label: 'Endurance', color: 'var(--warning-amber)' };
|
|
case 'sprint':
|
|
return { icon: Zap, label: 'Sprint', color: 'var(--neon-aqua)' };
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export function TeamCard({
|
|
name,
|
|
description,
|
|
logo,
|
|
memberCount,
|
|
rating,
|
|
totalWins,
|
|
totalRaces,
|
|
performanceLevel,
|
|
isRecruiting,
|
|
specialization,
|
|
region,
|
|
languages,
|
|
category,
|
|
onClick,
|
|
}: TeamCardProps) {
|
|
const performanceBadge = getPerformanceBadge(performanceLevel);
|
|
const specializationBadge = getSpecializationBadge(specialization);
|
|
|
|
return (
|
|
<UiTeamCard
|
|
name={name}
|
|
description={description}
|
|
logo={logo}
|
|
memberCount={memberCount}
|
|
isRecruiting={isRecruiting}
|
|
onClick={onClick}
|
|
region={region}
|
|
performanceBadge={performanceBadge && (
|
|
<Badge variant={performanceBadge.variant} icon={performanceBadge.icon}>
|
|
{performanceBadge.label}
|
|
</Badge>
|
|
)}
|
|
specializationContent={specializationBadge && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Icon icon={specializationBadge.icon} size={3} color={specializationBadge.color} />
|
|
<Text size="xs" color="text-gray-500">{specializationBadge.label}</Text>
|
|
</Stack>
|
|
)}
|
|
categoryBadge={category && (
|
|
<Badge variant="primary">
|
|
<Stack w="2" h="2" rounded="full" bg="bg-purple-500" mr={1.5} />
|
|
{category}
|
|
</Badge>
|
|
)}
|
|
languagesContent={languages && languages.length > 0 && (
|
|
<Stack
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={1.5}
|
|
px={2}
|
|
py={1}
|
|
rounded="md"
|
|
bg="bg-iron-gray/50"
|
|
border
|
|
borderColor="border-charcoal-outline/30"
|
|
>
|
|
<Icon icon={Languages} size={3} color="var(--neon-purple)" />
|
|
<Text size="xs" color="text-gray-400">
|
|
{languages.slice(0, 2).join(', ')}
|
|
{languages.length > 2 && ` +${languages.length - 2}`}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
statsContent={
|
|
<>
|
|
<TeamStatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} color="text-primary-blue" align="center" />
|
|
<TeamStatItem label="Wins" value={totalWins ?? 0} color="text-performance-green" align="center" />
|
|
<TeamStatItem label="Races" value={totalRaces ?? 0} color="text-white" align="center" />
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|