website refactor
This commit is contained in:
@@ -1,23 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import React from 'react';
|
||||
import {
|
||||
Users,
|
||||
Trophy,
|
||||
Award,
|
||||
Crown,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Shield,
|
||||
ChevronRight,
|
||||
UserPlus,
|
||||
Zap,
|
||||
Clock,
|
||||
Globe,
|
||||
Languages,
|
||||
Crown,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Shield
|
||||
} from 'lucide-react';
|
||||
|
||||
import PlaceholderImage from '@/components/ui/PlaceholderImage';
|
||||
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;
|
||||
@@ -41,13 +45,13 @@ interface TeamCardProps {
|
||||
function getPerformanceBadge(level?: string) {
|
||||
switch (level) {
|
||||
case 'pro':
|
||||
return { icon: Crown, label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20 border-yellow-500/30' };
|
||||
return { icon: Crown, label: 'Pro', variant: 'warning' as const };
|
||||
case 'advanced':
|
||||
return { icon: Star, label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-500/20 border-purple-500/30' };
|
||||
return { icon: Star, label: 'Advanced', variant: 'primary' as const };
|
||||
case 'intermediate':
|
||||
return { icon: TrendingUp, label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/20 border-primary-blue/30' };
|
||||
return { icon: TrendingUp, label: 'Intermediate', variant: 'info' as const };
|
||||
case 'beginner':
|
||||
return { icon: Shield, label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-500/20 border-green-500/30' };
|
||||
return { icon: Shield, label: 'Beginner', variant: 'success' as const };
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
@@ -56,16 +60,15 @@ function getPerformanceBadge(level?: string) {
|
||||
function getSpecializationBadge(specialization?: string) {
|
||||
switch (specialization) {
|
||||
case 'endurance':
|
||||
return { icon: Clock, label: 'Endurance', color: 'text-orange-400' };
|
||||
return { icon: Clock, label: 'Endurance', color: '#f97316' };
|
||||
case 'sprint':
|
||||
return { icon: Zap, label: 'Sprint', color: 'text-neon-aqua' };
|
||||
return { icon: Zap, label: 'Sprint', color: '#00f2ff' };
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default function TeamCard({
|
||||
id,
|
||||
export function TeamCard({
|
||||
name,
|
||||
description,
|
||||
logo,
|
||||
@@ -81,142 +84,132 @@ export default function TeamCard({
|
||||
category,
|
||||
onClick,
|
||||
}: TeamCardProps) {
|
||||
const logoUrl = logo;
|
||||
const performanceBadge = getPerformanceBadge(performanceLevel);
|
||||
const specializationBadge = getSpecializationBadge(specialization);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group relative cursor-pointer h-full"
|
||||
onClick={onClick}
|
||||
>
|
||||
{/* Card Container */}
|
||||
<div className="relative h-full rounded-xl bg-iron-gray border border-charcoal-outline overflow-hidden transition-all duration-200 hover:border-purple-500/50 hover:shadow-[0_0_30px_rgba(168,85,247,0.15)] hover:bg-iron-gray/80 flex flex-col">
|
||||
<Box onClick={onClick} style={{ height: '100%', cursor: 'pointer' }}>
|
||||
<Card style={{ height: '100%', padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Header with Logo */}
|
||||
<div className="relative p-4 pb-0">
|
||||
<div className="flex items-start gap-4">
|
||||
<Box style={{ padding: '1rem', paddingBottom: 0 }}>
|
||||
<Stack direction="row" align="start" gap={4}>
|
||||
{/* Logo */}
|
||||
<div className="w-14 h-14 rounded-xl bg-charcoal-outline flex items-center justify-center flex-shrink-0 overflow-hidden border border-charcoal-outline">
|
||||
{logoUrl ? (
|
||||
<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={logoUrl}
|
||||
src={logo}
|
||||
alt={name}
|
||||
width={56}
|
||||
height={56}
|
||||
className="w-full h-full object-cover"
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<PlaceholderImage size={56} />
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Title & Badges */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="text-base font-semibold text-white truncate group-hover:text-purple-400 transition-colors">
|
||||
<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}
|
||||
</h3>
|
||||
</Heading>
|
||||
{isRecruiting && (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-performance-green/20 text-performance-green border border-performance-green/30 whitespace-nowrap">
|
||||
<UserPlus className="w-3 h-3" />
|
||||
<Badge variant="success">
|
||||
<UserPlus style={{ width: '0.75rem', height: '0.75rem' }} />
|
||||
Recruiting
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
{/* Performance Level & Category */}
|
||||
<div className="mt-1.5 flex items-center gap-2 flex-wrap">
|
||||
<Stack direction="row" align="center" gap={2} wrap style={{ marginTop: '0.375rem' }}>
|
||||
{performanceBadge && (
|
||||
<span className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ${performanceBadge.bgColor}`}>
|
||||
<performanceBadge.icon className={`w-3 h-3 ${performanceBadge.color}`} />
|
||||
<span className={performanceBadge.color}>{performanceBadge.label}</span>
|
||||
</span>
|
||||
<Badge variant={performanceBadge.variant}>
|
||||
<performanceBadge.icon style={{ width: '0.75rem', height: '0.75rem' }} />
|
||||
{performanceBadge.label}
|
||||
</Badge>
|
||||
)}
|
||||
{specializationBadge && (
|
||||
<span className="flex items-center gap-1 text-[10px] text-gray-500">
|
||||
<specializationBadge.icon className={`w-3 h-3 ${specializationBadge.color}`} />
|
||||
{specializationBadge.label}
|
||||
</span>
|
||||
<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 && (
|
||||
<span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-purple-500/20 border border-purple-500/30 text-purple-400">
|
||||
<span className="w-2 h-2 rounded-full bg-purple-400"></span>
|
||||
<Badge variant="primary">
|
||||
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
|
||||
{category}
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4 flex flex-col flex-1">
|
||||
<Box style={{ padding: '1rem', display: 'flex', flexDirection: 'column', flex: 1 }}>
|
||||
{/* Description */}
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mb-3">
|
||||
<Text size="xs" color="text-gray-500" style={{ marginBottom: '0.75rem', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
|
||||
{description || 'No description available'}
|
||||
</p>
|
||||
</Text>
|
||||
|
||||
{/* Region & Languages */}
|
||||
{(region || (languages && languages.length > 0)) && (
|
||||
<div className="flex flex-wrap items-center gap-2 mb-3">
|
||||
<Stack direction="row" align="center" gap={2} wrap style={{ marginBottom: '0.75rem' }}>
|
||||
{region && (
|
||||
<span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
|
||||
<Globe className="w-3 h-3 text-neon-aqua" />
|
||||
{region}
|
||||
</span>
|
||||
<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 && (
|
||||
<span className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] bg-charcoal-outline/50 text-gray-400 border border-charcoal-outline/30">
|
||||
<Languages className="w-3 h-3 text-purple-400" />
|
||||
{languages.slice(0, 2).join(', ')}
|
||||
{languages.length > 2 && ` +${languages.length - 2}`}
|
||||
</span>
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
<div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
|
||||
<div className="text-[10px] text-gray-500 mb-0.5">Rating</div>
|
||||
<div className="text-sm font-semibold text-primary-blue">
|
||||
{typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
|
||||
<div className="text-[10px] text-gray-500 mb-0.5">Wins</div>
|
||||
<div className="text-sm font-semibold text-performance-green">
|
||||
{totalWins ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
|
||||
<div className="text-[10px] text-gray-500 mb-0.5">Races</div>
|
||||
<div className="text-sm font-semibold text-white">
|
||||
{totalRaces ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 */}
|
||||
<div className="flex-1" />
|
||||
<Box style={{ flex: 1 }} />
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50 mt-auto">
|
||||
<div className="flex items-center gap-2 text-[10px] text-gray-500">
|
||||
<Users className="w-3 h-3" />
|
||||
<span>
|
||||
<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'}
|
||||
</span>
|
||||
</div>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
{/* View Arrow */}
|
||||
<div className="flex items-center gap-1 text-[10px] text-gray-500 group-hover:text-purple-400 transition-colors">
|
||||
<span>View</span>
|
||||
<ChevronRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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