website refactor

This commit is contained in:
2026-01-20 21:35:50 +01:00
parent 06207bf835
commit 51288234f4
42 changed files with 892 additions and 449 deletions

View File

@@ -18,6 +18,8 @@ interface TeamLeaderboardPreviewProps {
totalWins: number;
logoUrl: string;
position: number;
rating?: number;
performanceLevel: string;
}[];
onTeamClick: (id: string) => void;
onNavigateToTeams: () => void;
@@ -28,12 +30,12 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
return (
<LeaderboardPreviewShell
title="Team Rankings"
title="Team Standings"
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))"
iconColor="var(--ui-color-intent-primary)"
iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
viewFullLabel="View All"
>
<LeaderboardList>
@@ -72,7 +74,7 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
border
borderColor="border-charcoal-outline"
overflow="hidden"
groupHoverBorderColor="purple-400/50"
groupHoverBorderColor="primary-blue/50"
transition
>
<Image
@@ -91,31 +93,26 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
weight="semibold"
color="text-white"
truncate
groupHoverTextColor="text-purple-400"
groupHoverTextColor="text-primary-blue"
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>
)}
<Text size="xs" variant="low" uppercase font="mono">{team.performanceLevel}</Text>
<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>
<Text size="xs" color="text-gray-500">{team.memberCount}</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>
<Text color="text-primary-blue" font="mono" weight="bold" block size="sm">{team.rating?.toFixed(0) || '1000'}</Text>
<Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Rating</Text>
</Box>
<Box textAlign="right" minWidth="12">
<Text color="text-performance-green" font="mono" weight="bold" block size="sm">{team.totalWins}</Text>