119 lines
4.7 KiB
TypeScript
119 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Medal, Users } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Image } from '@/ui/Image';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
|
|
interface Team {
|
|
id: string;
|
|
name: string;
|
|
logoUrl?: string;
|
|
performanceLevel: string;
|
|
category?: string;
|
|
region?: string;
|
|
languages?: string[];
|
|
isRecruiting?: boolean;
|
|
memberCount: number;
|
|
totalWins: number;
|
|
totalRaces: number;
|
|
}
|
|
|
|
interface TeamRankingsTableProps {
|
|
teams: Team[];
|
|
sortBy: string;
|
|
onTeamClick: (id: string) => void;
|
|
}
|
|
|
|
export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTableProps) {
|
|
return (
|
|
<Surface variant="muted" rounded="xl" border className="overflow-hidden">
|
|
{/* Table Header */}
|
|
<Box display="grid" className="grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-[10px] font-medium text-gray-500 uppercase tracking-wider">
|
|
<Box className="col-span-1 text-center">Rank</Box>
|
|
<Box className="col-span-5">Team</Box>
|
|
<Box className="col-span-2 text-center hidden lg:block">Members</Box>
|
|
<Box className="col-span-2 text-center">Rating</Box>
|
|
<Box className="col-span-2 text-center">Wins</Box>
|
|
</Box>
|
|
|
|
{/* Table Body */}
|
|
<Stack gap={0}>
|
|
{teams.map((team, index) => {
|
|
return (
|
|
<Box
|
|
key={team.id}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => onTeamClick(team.id)}
|
|
display="grid"
|
|
className={`grid-cols-12 gap-4 p-4 w-full text-left bg-transparent border-0 cursor-pointer hover:bg-iron-gray/20 transition-colors ${
|
|
index < teams.length - 1 ? 'border-b border-charcoal-outline/50' : ''
|
|
}`}
|
|
>
|
|
{/* Position */}
|
|
<Box className="col-span-1 flex items-center justify-center">
|
|
<Box width={9} height={9} rounded="full" display="flex" center backgroundColor="charcoal-outline">
|
|
{index < 3 ? <Icon icon={Medal} size={4} color={index === 0 ? 'text-yellow-400' : index === 1 ? 'text-gray-300' : 'text-amber-600'} /> : <Text size="xs" color="text-gray-400">{index + 1}</Text>}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Team Info */}
|
|
<Box className="col-span-5 flex items-center gap-3">
|
|
<Box width={10} height={10} rounded="lg" className="overflow-hidden" border borderColor="charcoal-outline">
|
|
<Image
|
|
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
|
alt={team.name}
|
|
width={40}
|
|
height={40}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</Box>
|
|
<Box className="min-w-0 flex-1">
|
|
<Text weight="semibold" color="text-white" block className="truncate">{team.name}</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={1} wrap>
|
|
<Text size="xs" color="text-gray-500">{team.performanceLevel}</Text>
|
|
{team.category && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Box width={1.5} height={1.5} rounded="full" backgroundColor="primary-blue" opacity={0.5} />
|
|
<Text size="xs" color="text-primary-blue">{team.category}</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Members */}
|
|
<Box className="col-span-2 flex items-center justify-center hidden lg:flex">
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={Users} size={3.5} color="text-gray-500" />
|
|
<Text size="sm" color="text-gray-400">{team.memberCount}</Text>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Rating */}
|
|
<Box className="col-span-2 flex items-center justify-center">
|
|
<Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
|
|
0
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Wins */}
|
|
<Box className="col-span-2 flex items-center justify-center">
|
|
<Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
|
|
{team.totalWins}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|