123 lines
3.5 KiB
TypeScript
123 lines
3.5 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 { Group } from '@/ui/Group';
|
|
import { Text } from '@/ui/Text';
|
|
import { BadgeGroup } from '@/ui/BadgeGroup';
|
|
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: 'default' 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', intent: 'warning' as const };
|
|
case 'sprint':
|
|
return { icon: Zap, label: 'Sprint', intent: 'telemetry' as const };
|
|
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 && (
|
|
<Group gap={1}>
|
|
<Icon icon={specializationBadge.icon} size={3} intent={specializationBadge.intent} />
|
|
<Text size="xs" variant="low">{specializationBadge.label}</Text>
|
|
</Group>
|
|
)}
|
|
categoryBadge={category && (
|
|
<Badge variant="primary">
|
|
{category}
|
|
</Badge>
|
|
)}
|
|
languagesContent={languages && languages.length > 0 && (
|
|
<Badge variant="default" icon={Languages}>
|
|
{languages.slice(0, 2).join(', ')}
|
|
{languages.length > 2 && ` +${languages.length - 2}`}
|
|
</Badge>
|
|
)}
|
|
statsContent={
|
|
<Group gap={4} justify="center">
|
|
<TeamStatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} intent="primary" align="center" />
|
|
<TeamStatItem label="Wins" value={totalWins ?? 0} intent="success" align="center" />
|
|
<TeamStatItem label="Races" value={totalRaces ?? 0} intent="high" align="center" />
|
|
</Group>
|
|
}
|
|
/>
|
|
);
|
|
}
|