website refactor
This commit is contained in:
@@ -1,215 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user