216 lines
8.3 KiB
TypeScript
216 lines
8.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {
|
|
Users,
|
|
ChevronRight,
|
|
UserPlus,
|
|
Zap,
|
|
Clock,
|
|
Globe,
|
|
Languages,
|
|
Crown,
|
|
Star,
|
|
TrendingUp,
|
|
Shield
|
|
} from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Image } from '@/ui/Image';
|
|
import PlaceholderImage from '@/ui/PlaceholderImage';
|
|
|
|
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: '#f97316' };
|
|
case 'sprint':
|
|
return { icon: Zap, label: 'Sprint', color: '#00f2ff' };
|
|
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 (
|
|
<Box onClick={onClick} style={{ height: '100%', cursor: 'pointer' }}>
|
|
<Card style={{ height: '100%', padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
{/* Header with Logo */}
|
|
<Box style={{ padding: '1rem', paddingBottom: 0 }}>
|
|
<Stack direction="row" align="start" gap={4}>
|
|
{/* Logo */}
|
|
<Box style={{ width: '3.5rem', height: '3.5rem', borderRadius: '0.75rem', backgroundColor: '#262626', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', border: '1px solid #262626' }}>
|
|
{logo ? (
|
|
<Image
|
|
src={logo}
|
|
alt={name}
|
|
width={56}
|
|
height={56}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
) : (
|
|
<PlaceholderImage size={56} />
|
|
)}
|
|
</Box>
|
|
|
|
{/* Title & Badges */}
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Stack direction="row" align="start" justify="between" gap={2}>
|
|
<Heading level={3} style={{ fontSize: '1rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
|
{name}
|
|
</Heading>
|
|
{isRecruiting && (
|
|
<Badge variant="success">
|
|
<UserPlus style={{ width: '0.75rem', height: '0.75rem' }} />
|
|
Recruiting
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
|
|
{/* Performance Level & Category */}
|
|
<Stack direction="row" align="center" gap={2} wrap style={{ marginTop: '0.375rem' }}>
|
|
{performanceBadge && (
|
|
<Badge variant={performanceBadge.variant}>
|
|
<performanceBadge.icon style={{ width: '0.75rem', height: '0.75rem' }} />
|
|
{performanceBadge.label}
|
|
</Badge>
|
|
)}
|
|
{specializationBadge && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<specializationBadge.icon style={{ width: '0.75rem', height: '0.75rem', color: specializationBadge.color }} />
|
|
<Text size="xs" color="text-gray-500">{specializationBadge.label}</Text>
|
|
</Stack>
|
|
)}
|
|
{category && (
|
|
<Badge variant="primary">
|
|
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
|
|
{category}
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Content */}
|
|
<Box style={{ padding: '1rem', display: 'flex', flexDirection: 'column', flex: 1 }}>
|
|
{/* Description */}
|
|
<Text size="xs" color="text-gray-500" style={{ marginBottom: '0.75rem', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
|
|
{description || 'No description available'}
|
|
</Text>
|
|
|
|
{/* Region & Languages */}
|
|
{(region || (languages && languages.length > 0)) && (
|
|
<Stack direction="row" align="center" gap={2} wrap style={{ marginBottom: '0.75rem' }}>
|
|
{region && (
|
|
<Box style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', borderRadius: '0.375rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid rgba(38, 38, 38, 0.3)' }}>
|
|
<Globe style={{ width: '0.75rem', height: '0.75rem', color: '#00f2ff' }} />
|
|
<Text size="xs" color="text-gray-400">{region}</Text>
|
|
</Box>
|
|
)}
|
|
{languages && languages.length > 0 && (
|
|
<Box style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', borderRadius: '0.375rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid rgba(38, 38, 38, 0.3)' }}>
|
|
<Languages style={{ width: '0.75rem', height: '0.75rem', color: '#a855f7' }} />
|
|
<Text size="xs" color="text-gray-400">
|
|
{languages.slice(0, 2).join(', ')}
|
|
{languages.length > 2 && ` +${languages.length - 2}`}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
)}
|
|
|
|
{/* Stats Grid */}
|
|
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '0.5rem', marginBottom: '1rem' }}>
|
|
<StatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} color="#3b82f6" />
|
|
<StatItem label="Wins" value={totalWins ?? 0} color="#10b981" />
|
|
<StatItem label="Races" value={totalRaces ?? 0} color="white" />
|
|
</Box>
|
|
|
|
{/* Spacer */}
|
|
<Box style={{ flex: 1 }} />
|
|
|
|
{/* Footer */}
|
|
<Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: '0.75rem', borderTop: '1px solid rgba(38, 38, 38, 0.5)', marginTop: 'auto' }}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Users style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
|
|
<Text size="xs" color="text-gray-500">
|
|
{memberCount} {memberCount === 1 ? 'member' : 'members'}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Text size="xs" color="text-gray-500">View</Text>
|
|
<ChevronRight style={{ width: '0.75rem', height: '0.75rem', color: '#737373' }} />
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function StatItem({ label, value, color }: { label: string, value: string | number, color: string }) {
|
|
return (
|
|
<Box style={{ textAlign: 'center', padding: '0.5rem', borderRadius: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.3)' }}>
|
|
<Text size="xs" color="text-gray-500" style={{ display: 'block', marginBottom: '0.125rem' }}>{label}</Text>
|
|
<Text size="sm" weight="semibold" style={{ color }}>{value}</Text>
|
|
</Box>
|
|
);
|
|
}
|