132 lines
4.5 KiB
TypeScript
132 lines
4.5 KiB
TypeScript
import { Users } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Image } from '@/ui/Image';
|
|
import { LeaderboardList } from '@/ui/LeaderboardList';
|
|
import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
|
|
import { RankBadge } from '@/components/leaderboards/RankBadge';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface TeamLeaderboardPreviewProps {
|
|
teams: {
|
|
id: string;
|
|
name: string;
|
|
tag: string;
|
|
memberCount: number;
|
|
category?: string;
|
|
totalWins: number;
|
|
logoUrl: string;
|
|
position: number;
|
|
}[];
|
|
onTeamClick: (id: string) => void;
|
|
onNavigateToTeams: () => void;
|
|
}
|
|
|
|
export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }: TeamLeaderboardPreviewProps) {
|
|
const top5 = teams;
|
|
|
|
return (
|
|
<LeaderboardPreviewShell
|
|
title="Team Rankings"
|
|
subtitle="Top Performing Teams"
|
|
onViewFull={onNavigateToTeams}
|
|
icon={Users}
|
|
iconColor="var(--neon-purple)"
|
|
iconBgGradient="linear-gradient(to bottom right, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1))"
|
|
viewFullLabel="View All"
|
|
>
|
|
<LeaderboardList>
|
|
{top5.map((team) => {
|
|
const position = team.position;
|
|
|
|
return (
|
|
<Box
|
|
key={team.id}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => onTeamClick(team.id)}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
px={5}
|
|
py={3}
|
|
w="full"
|
|
textAlign="left"
|
|
transition
|
|
hoverBg="bg-white/[0.02]"
|
|
group
|
|
>
|
|
<Box w="8" display="flex" justifyContent="center">
|
|
<RankBadge rank={position} />
|
|
</Box>
|
|
|
|
<Box
|
|
display="flex"
|
|
h="9"
|
|
w="9"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="lg"
|
|
bg="bg-graphite-black/50"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
overflow="hidden"
|
|
groupHoverBorderColor="purple-400/50"
|
|
transition
|
|
>
|
|
<Image
|
|
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
|
alt={team.name}
|
|
width={36}
|
|
height={36}
|
|
fullWidth
|
|
fullHeight
|
|
objectFit="cover"
|
|
/>
|
|
</Box>
|
|
|
|
<Box flexGrow={1} minWidth="0">
|
|
<Text
|
|
weight="semibold"
|
|
color="text-white"
|
|
truncate
|
|
groupHoverTextColor="text-purple-400"
|
|
transition
|
|
block
|
|
>
|
|
{team.name}
|
|
</Text>
|
|
<Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
|
|
{team.category && (
|
|
<Box display="flex" alignItems="center" gap={1} color="text-purple-400">
|
|
<Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
|
|
<Text size="xs" weight="medium">{team.category}</Text>
|
|
</Box>
|
|
)}
|
|
<Box w="1" h="1" rounded="full" bg="bg-gray-700" />
|
|
<Box display="flex" alignItems="center" gap={1}>
|
|
<Icon icon={Users} size={3} color="text-gray-500" />
|
|
<Text size="xs" color="text-gray-500">{team.memberCount} members</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box display="flex" alignItems="center" gap={6}>
|
|
<Box textAlign="right">
|
|
<Text color="text-purple-400" font="mono" weight="bold" block size="sm">{team.memberCount}</Text>
|
|
<Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Members</Text>
|
|
</Box>
|
|
<Box textAlign="right" minWidth="12">
|
|
<Text color="text-performance-green" font="mono" weight="bold" block size="sm">{team.totalWins}</Text>
|
|
<Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</LeaderboardList>
|
|
</LeaderboardPreviewShell>
|
|
);
|
|
}
|