665 lines
24 KiB
TypeScript
665 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
Users,
|
|
Trophy,
|
|
Search,
|
|
Crown,
|
|
Star,
|
|
TrendingUp,
|
|
Shield,
|
|
Target,
|
|
Award,
|
|
ArrowLeft,
|
|
Medal,
|
|
Percent,
|
|
Hash,
|
|
Globe,
|
|
Languages,
|
|
} from 'lucide-react';
|
|
import Button from '@/components/ui/Button';
|
|
import Input from '@/components/ui/Input';
|
|
import Heading from '@/components/ui/Heading';
|
|
import { getGetTeamsLeaderboardUseCase } from '@/lib/di-container';
|
|
import { TeamsLeaderboardPresenter } from '@/lib/presenters/TeamsLeaderboardPresenter';
|
|
import type {
|
|
TeamLeaderboardItemViewModel,
|
|
SkillLevel,
|
|
} from '@gridpilot/racing/application/presenters/ITeamsLeaderboardPresenter';
|
|
|
|
// ============================================================================
|
|
// TYPES
|
|
// ============================================================================
|
|
|
|
type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
|
|
|
|
type TeamDisplayData = TeamLeaderboardItemViewModel;
|
|
|
|
const getSafeRating = (team: TeamDisplayData): number => {
|
|
const value = typeof team.rating === 'number' ? team.rating : 0;
|
|
return Number.isFinite(value) ? value : 0;
|
|
};
|
|
|
|
const getSafeTotalWins = (team: TeamDisplayData): number => {
|
|
const raw = team.totalWins;
|
|
const value = typeof raw === 'number' ? raw : 0;
|
|
return Number.isFinite(value) ? value : 0;
|
|
};
|
|
|
|
const getSafeTotalRaces = (team: TeamDisplayData): number => {
|
|
const raw = team.totalRaces;
|
|
const value = typeof raw === 'number' ? raw : 0;
|
|
return Number.isFinite(value) ? value : 0;
|
|
};
|
|
|
|
// ============================================================================
|
|
// SKILL LEVEL CONFIG
|
|
// ============================================================================
|
|
|
|
const SKILL_LEVELS: {
|
|
id: SkillLevel;
|
|
label: string;
|
|
icon: React.ElementType;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor: string;
|
|
}[] = [
|
|
{
|
|
id: 'pro',
|
|
label: 'Pro',
|
|
icon: Crown,
|
|
color: 'text-yellow-400',
|
|
bgColor: 'bg-yellow-400/10',
|
|
borderColor: 'border-yellow-400/30',
|
|
},
|
|
{
|
|
id: 'advanced',
|
|
label: 'Advanced',
|
|
icon: Star,
|
|
color: 'text-purple-400',
|
|
bgColor: 'bg-purple-400/10',
|
|
borderColor: 'border-purple-400/30',
|
|
},
|
|
{
|
|
id: 'intermediate',
|
|
label: 'Intermediate',
|
|
icon: TrendingUp,
|
|
color: 'text-primary-blue',
|
|
bgColor: 'bg-primary-blue/10',
|
|
borderColor: 'border-primary-blue/30',
|
|
},
|
|
{
|
|
id: 'beginner',
|
|
label: 'Beginner',
|
|
icon: Shield,
|
|
color: 'text-green-400',
|
|
bgColor: 'bg-green-400/10',
|
|
borderColor: 'border-green-400/30',
|
|
},
|
|
];
|
|
|
|
// ============================================================================
|
|
// SORT OPTIONS
|
|
// ============================================================================
|
|
|
|
const SORT_OPTIONS: { id: SortBy; label: string; icon: React.ElementType }[] = [
|
|
{ id: 'rating', label: 'Rating', icon: Star },
|
|
{ id: 'wins', label: 'Total Wins', icon: Trophy },
|
|
{ id: 'winRate', label: 'Win Rate', icon: Percent },
|
|
{ id: 'races', label: 'Races', icon: Hash },
|
|
];
|
|
|
|
// ============================================================================
|
|
// TOP THREE PODIUM COMPONENT
|
|
// ============================================================================
|
|
|
|
interface TopThreePodiumProps {
|
|
teams: TeamDisplayData[];
|
|
onTeamClick: (teamId: string) => void;
|
|
}
|
|
|
|
function TopThreePodium({ teams, onTeamClick }: TopThreePodiumProps) {
|
|
const top3 = teams.slice(0, 3) as [TeamDisplayData, TeamDisplayData, TeamDisplayData];
|
|
if (teams.length < 3) return null;
|
|
|
|
// Display order: 2nd, 1st, 3rd
|
|
const podiumOrder: [TeamDisplayData, TeamDisplayData, TeamDisplayData] = [
|
|
top3[1],
|
|
top3[0],
|
|
top3[2],
|
|
];
|
|
const podiumHeights = ['h-28', 'h-36', 'h-20'];
|
|
const podiumPositions = [2, 1, 3];
|
|
|
|
const getPositionColor = (position: number) => {
|
|
switch (position) {
|
|
case 1:
|
|
return 'text-yellow-400';
|
|
case 2:
|
|
return 'text-gray-300';
|
|
case 3:
|
|
return 'text-amber-600';
|
|
default:
|
|
return 'text-gray-500';
|
|
}
|
|
};
|
|
|
|
const getGradient = (position: number) => {
|
|
switch (position) {
|
|
case 1:
|
|
return 'from-yellow-400/30 via-yellow-500/20 to-yellow-600/10';
|
|
case 2:
|
|
return 'from-gray-300/30 via-gray-400/20 to-gray-500/10';
|
|
case 3:
|
|
return 'from-amber-500/30 via-amber-600/20 to-amber-700/10';
|
|
default:
|
|
return 'from-gray-600/30 to-gray-700/10';
|
|
}
|
|
};
|
|
|
|
const getBorderColor = (position: number) => {
|
|
switch (position) {
|
|
case 1:
|
|
return 'border-yellow-400/50';
|
|
case 2:
|
|
return 'border-gray-300/50';
|
|
case 3:
|
|
return 'border-amber-600/50';
|
|
default:
|
|
return 'border-charcoal-outline';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="mb-10 p-8 rounded-2xl bg-gradient-to-br from-iron-gray/60 to-iron-gray/30 border border-charcoal-outline">
|
|
<div className="flex items-center justify-center gap-2 mb-8">
|
|
<Trophy className="w-6 h-6 text-yellow-400" />
|
|
<h2 className="text-xl font-bold text-white">Top 3 Teams</h2>
|
|
</div>
|
|
|
|
<div className="flex items-end justify-center gap-4 md:gap-8">
|
|
{podiumOrder.map((team, index) => {
|
|
const position = podiumPositions[index] ?? 0;
|
|
const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
|
|
const LevelIcon = levelConfig?.icon || Shield;
|
|
|
|
return (
|
|
<button
|
|
key={team.id}
|
|
type="button"
|
|
onClick={() => onTeamClick(team.id)}
|
|
className="flex flex-col items-center group"
|
|
>
|
|
{/* Team card */}
|
|
<div
|
|
className={`relative mb-4 p-4 rounded-xl bg-gradient-to-br ${getGradient(position ?? 0)} border ${getBorderColor(position ?? 0)} transition-all group-hover:scale-105 group-hover:shadow-lg`}
|
|
>
|
|
{/* Crown for 1st place */}
|
|
{position === 1 && (
|
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
|
|
<div className="relative">
|
|
<Crown className="w-8 h-8 text-yellow-400 animate-pulse" />
|
|
<div className="absolute inset-0 w-8 h-8 bg-yellow-400/30 blur-md rounded-full" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Team icon */}
|
|
<div
|
|
className={`flex h-16 w-16 md:h-20 md:w-20 items-center justify-center rounded-xl ${levelConfig?.bgColor} border ${levelConfig?.borderColor} mb-3`}
|
|
>
|
|
<LevelIcon className={`w-8 h-8 md:w-10 md:h-10 ${levelConfig?.color}`} />
|
|
</div>
|
|
|
|
{/* Team name */}
|
|
<p className="text-white font-bold text-sm md:text-base text-center max-w-[120px] truncate group-hover:text-purple-400 transition-colors">
|
|
{team.name}
|
|
</p>
|
|
|
|
{/* Rating */}
|
|
<p className={`text-lg md:text-xl font-mono font-bold ${getPositionColor(position)} text-center`}>
|
|
{getSafeRating(team).toLocaleString()}
|
|
</p>
|
|
|
|
{/* Stats row */}
|
|
<div className="flex items-center justify-center gap-3 mt-2 text-xs text-gray-400">
|
|
<span className="flex items-center gap-1">
|
|
<Trophy className="w-3 h-3 text-performance-green" />
|
|
{getSafeTotalWins(team)}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Users className="w-3 h-3 text-purple-400" />
|
|
{team.memberCount}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Podium stand */}
|
|
<div
|
|
className={`${podiumHeights[index]} w-20 md:w-28 rounded-t-lg bg-gradient-to-t ${getGradient(position)} border-t border-x ${getBorderColor(position)} flex items-start justify-center pt-3`}
|
|
>
|
|
<span className={`text-2xl md:text-3xl font-bold ${getPositionColor(position)}`}>
|
|
{position}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================================================
|
|
// MAIN PAGE COMPONENT
|
|
// ============================================================================
|
|
|
|
export default function TeamLeaderboardPage() {
|
|
const router = useRouter();
|
|
const [teams, setTeams] = useState<TeamDisplayData[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [sortBy, setSortBy] = useState<SortBy>('rating');
|
|
const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
|
|
|
|
useEffect(() => {
|
|
const loadTeams = async () => {
|
|
try {
|
|
const useCase = getGetTeamsLeaderboardUseCase();
|
|
const presenter = new TeamsLeaderboardPresenter();
|
|
|
|
await useCase.execute(undefined as void, presenter);
|
|
|
|
const viewModel = presenter.getViewModel();
|
|
if (viewModel) {
|
|
setTeams(viewModel.teams);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load teams:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
void loadTeams();
|
|
}, []);
|
|
|
|
|
|
const handleTeamClick = (teamId: string) => {
|
|
if (teamId.startsWith('demo-team-')) {
|
|
return;
|
|
}
|
|
router.push(`/teams/${teamId}`);
|
|
};
|
|
|
|
// Filter and sort teams
|
|
const filteredAndSortedTeams = teams
|
|
.filter((team) => {
|
|
// Search filter
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
if (!team.name.toLowerCase().includes(query) && !(team.description ?? '').toLowerCase().includes(query)) {
|
|
return false;
|
|
}
|
|
}
|
|
// Level filter
|
|
if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
|
|
return false;
|
|
}
|
|
// Must have rating for leaderboard
|
|
return team.rating !== null;
|
|
})
|
|
.sort((a, b) => {
|
|
switch (sortBy) {
|
|
case 'rating': {
|
|
const aRating = getSafeRating(a);
|
|
const bRating = getSafeRating(b);
|
|
return bRating - aRating;
|
|
}
|
|
case 'wins': {
|
|
const aWinsSort = getSafeTotalWins(a);
|
|
const bWinsSort = getSafeTotalWins(b);
|
|
return bWinsSort - aWinsSort;
|
|
}
|
|
case 'winRate': {
|
|
const aRaces = getSafeTotalRaces(a);
|
|
const bRaces = getSafeTotalRaces(b);
|
|
const aWins = getSafeTotalWins(a);
|
|
const bWins = getSafeTotalWins(b);
|
|
const aRate = aRaces > 0 ? aWins / aRaces : 0;
|
|
const bRate = bRaces > 0 ? bWins / bRaces : 0;
|
|
return bRate - aRate;
|
|
}
|
|
case 'races': {
|
|
const aRacesSort = getSafeTotalRaces(a);
|
|
const bRacesSort = getSafeTotalRaces(b);
|
|
return bRacesSort - aRacesSort;
|
|
}
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
const getMedalColor = (position: number) => {
|
|
switch (position) {
|
|
case 0:
|
|
return 'text-yellow-400';
|
|
case 1:
|
|
return 'text-gray-300';
|
|
case 2:
|
|
return 'text-amber-600';
|
|
default:
|
|
return 'text-gray-500';
|
|
}
|
|
};
|
|
|
|
const getMedalBg = (position: number) => {
|
|
switch (position) {
|
|
case 0:
|
|
return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
|
|
case 1:
|
|
return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
|
|
case 2:
|
|
return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
|
|
default:
|
|
return 'bg-iron-gray/50 border-charcoal-outline';
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="w-10 h-10 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
|
|
<p className="text-gray-400">Loading leaderboard...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 pb-12">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => router.push('/teams')}
|
|
className="flex items-center gap-2 mb-6"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Back to Teams
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-4 mb-2">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
|
|
<Award className="w-7 h-7 text-yellow-400" />
|
|
</div>
|
|
<div>
|
|
<Heading level={1} className="text-3xl lg:text-4xl">
|
|
Team Leaderboard
|
|
</Heading>
|
|
<p className="text-gray-400">Rankings of all teams by performance metrics</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters and Search */}
|
|
<div className="mb-6 space-y-4">
|
|
{/* Search and Level Filter Row */}
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<div className="flex-1 relative max-w-md">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search teams..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-11"
|
|
/>
|
|
</div>
|
|
|
|
{/* Level Filter */}
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setFilterLevel('all')}
|
|
className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
filterLevel === 'all'
|
|
? 'bg-purple-600 text-white'
|
|
: 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
|
|
}`}
|
|
>
|
|
All Levels
|
|
</button>
|
|
{SKILL_LEVELS.map((level) => {
|
|
const LevelIcon = level.icon;
|
|
return (
|
|
<button
|
|
key={level.id}
|
|
type="button"
|
|
onClick={() => setFilterLevel(level.id)}
|
|
className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
filterLevel === level.id
|
|
? `${level.bgColor} ${level.color} border ${level.borderColor}`
|
|
: 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
|
|
}`}
|
|
>
|
|
<LevelIcon className="w-4 h-4" />
|
|
{level.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sort Options */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-gray-500">Sort by:</span>
|
|
<div className="flex items-center gap-1 p-1 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
|
{SORT_OPTIONS.map((option) => (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
onClick={() => setSortBy(option.id)}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
|
|
sortBy === option.id
|
|
? 'bg-purple-600 text-white'
|
|
: 'text-gray-400 hover:text-white hover:bg-iron-gray'
|
|
}`}
|
|
>
|
|
<option.icon className="w-3.5 h-3.5" />
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Podium for Top 3 - only show when viewing by rating without filters */}
|
|
{sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
|
|
<TopThreePodium teams={filteredAndSortedTeams} onTeamClick={handleTeamClick} />
|
|
)}
|
|
|
|
{/* Stats Summary */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
<div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Users className="w-4 h-4 text-purple-400" />
|
|
<span className="text-xs text-gray-500">Total Teams</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">{filteredAndSortedTeams.length}</p>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Crown className="w-4 h-4 text-yellow-400" />
|
|
<span className="text-xs text-gray-500">Pro Teams</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">
|
|
{filteredAndSortedTeams.filter((t) => t.performanceLevel === 'pro').length}
|
|
</p>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Trophy className="w-4 h-4 text-performance-green" />
|
|
<span className="text-xs text-gray-500">Total Wins</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">
|
|
{filteredAndSortedTeams.reduce<number>(
|
|
(sum, t) => sum + getSafeTotalWins(t),
|
|
0,
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Target className="w-4 h-4 text-neon-aqua" />
|
|
<span className="text-xs text-gray-500">Total Races</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">
|
|
{filteredAndSortedTeams.reduce<number>(
|
|
(sum, t) => sum + getSafeTotalRaces(t),
|
|
0,
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Leaderboard Table */}
|
|
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
|
{/* Table Header */}
|
|
<div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div className="col-span-1 text-center">Rank</div>
|
|
<div className="col-span-4 lg:col-span-5">Team</div>
|
|
<div className="col-span-2 text-center hidden lg:block">Members</div>
|
|
<div className="col-span-2 lg:col-span-1 text-center">Rating</div>
|
|
<div className="col-span-2 lg:col-span-1 text-center">Wins</div>
|
|
<div className="col-span-2 text-center">Win Rate</div>
|
|
</div>
|
|
|
|
{/* Table Body */}
|
|
<div className="divide-y divide-charcoal-outline/50">
|
|
{filteredAndSortedTeams.map((team, index) => {
|
|
const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
|
|
const LevelIcon = levelConfig?.icon || Shield;
|
|
const totalRaces = getSafeTotalRaces(team);
|
|
const totalWins = getSafeTotalWins(team);
|
|
const winRate =
|
|
totalRaces > 0 ? ((totalWins / totalRaces) * 100).toFixed(1) : '0.0';
|
|
|
|
return (
|
|
<button
|
|
key={team.id}
|
|
type="button"
|
|
onClick={() => handleTeamClick(team.id)}
|
|
className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
|
>
|
|
{/* Position */}
|
|
<div className="col-span-1 flex items-center justify-center">
|
|
<div
|
|
className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(index)} ${getMedalColor(index)}`}
|
|
>
|
|
{index < 3 ? (
|
|
<Medal className="w-4 h-4" />
|
|
) : (
|
|
index + 1
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Team Info */}
|
|
<div className="col-span-4 lg:col-span-5 flex items-center gap-3">
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${levelConfig?.bgColor} border ${levelConfig?.borderColor}`}>
|
|
<LevelIcon className={`w-5 h-5 ${levelConfig?.color}`} />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">
|
|
{team.name}
|
|
</p>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
|
|
<span className={`${levelConfig?.color}`}>{levelConfig?.label}</span>
|
|
{team.region && (
|
|
<span className="flex items-center gap-1 text-gray-400">
|
|
<Globe className="w-3 h-3 text-neon-aqua" />
|
|
{team.region}
|
|
</span>
|
|
)}
|
|
{team.languages && team.languages.length > 0 && (
|
|
<span className="flex items-center gap-1 text-gray-400">
|
|
<Languages className="w-3 h-3 text-purple-400" />
|
|
{team.languages.slice(0, 2).join(', ')}
|
|
{team.languages.length > 2 && ` +${team.languages.length - 2}`}
|
|
</span>
|
|
)}
|
|
{team.isRecruiting && (
|
|
<span className="flex items-center gap-1 text-performance-green">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
|
|
Recruiting
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Members */}
|
|
<div className="col-span-2 items-center justify-center hidden lg:flex">
|
|
<span className="flex items-center gap-1 text-gray-400">
|
|
<Users className="w-4 h-4" />
|
|
{team.memberCount}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Rating */}
|
|
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
|
<span
|
|
className={`font-mono font-semibold ${
|
|
sortBy === 'rating' ? 'text-purple-400' : 'text-white'
|
|
}`}
|
|
>
|
|
{getSafeRating(team).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Wins */}
|
|
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
|
<span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-purple-400' : 'text-white'}`}>
|
|
{getSafeTotalWins(team)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Win Rate */}
|
|
<div className="col-span-2 flex items-center justify-center">
|
|
<span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-purple-400' : 'text-white'}`}>
|
|
{winRate}%
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{filteredAndSortedTeams.length === 0 && (
|
|
<div className="py-16 text-center">
|
|
<Trophy className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
|
<p className="text-gray-400 mb-2">No teams found</p>
|
|
<p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
setSearchQuery('');
|
|
setFilterLevel('all');
|
|
}}
|
|
className="mt-4"
|
|
>
|
|
Clear Filters
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |