website refactor

This commit is contained in:
2026-01-18 23:36:04 +01:00
parent 182056a57b
commit 7c1cf62d4e
16 changed files with 317 additions and 373 deletions

View File

@@ -3,8 +3,8 @@ import { TeamIdentity } from '@/components/teams/TeamIdentity';
import { getMediaUrl } from '@/lib/utilities/media';
import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Group } from '@/ui/Group';
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Users } from 'lucide-react';
@@ -30,27 +30,15 @@ interface TeamRankingsTableProps {
export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTableProps) {
return (
<Card p={0} overflow="hidden">
<Card padding={0}>
<Table>
<TableHead>
<TableRow>
<TableHeader>
<Text size="xs" weight="medium" color="text-gray-500" align="center" block>Rank</Text>
</TableHeader>
<TableHeader>
<Text size="xs" weight="medium" color="text-gray-500" block>Team</Text>
</TableHeader>
<TableHeader>
<Stack display={{ base: 'none', lg: 'block' }}>
<Text size="xs" weight="medium" color="text-gray-500" align="center" block>Members</Text>
</Stack>
</TableHeader>
<TableHeader>
<Text size="xs" weight="medium" color="text-gray-500" align="center" block>Rating</Text>
</TableHeader>
<TableHeader>
<Text size="xs" weight="medium" color="text-gray-500" align="center" block>Wins</Text>
</TableHeader>
<TableHeaderCell textAlign="center">Rank</TableHeaderCell>
<TableHeaderCell>Team</TableHeaderCell>
<TableHeaderCell textAlign="center">Members</TableHeaderCell>
<TableHeaderCell textAlign="center">Rating</TableHeaderCell>
<TableHeaderCell textAlign="center">Wins</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
@@ -60,7 +48,7 @@ export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTa
onClick={() => onTeamClick(team.id)}
clickable
>
<TableCell>
<TableCell textAlign="center">
<RankBadge rank={index + 1} />
</TableCell>
<TableCell>
@@ -71,27 +59,21 @@ export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTa
category={team.category}
/>
</TableCell>
<TableCell>
<Stack display={{ base: 'none', lg: 'flex' }} alignItems="center" justifyContent="center">
<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>
</Stack>
<TableCell textAlign="center">
<Group justify="center" gap={1.5}>
<Icon icon={Users} size={3.5} intent="low" />
<Text size="sm" variant="low">{team.memberCount}</Text>
</Group>
</TableCell>
<TableCell>
<Stack display="flex" center>
<Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
0
</Text>
</Stack>
<TableCell textAlign="center">
<Text font="mono" weight="semibold" variant={sortBy === 'rating' ? 'primary' : 'high'}>
0
</Text>
</TableCell>
<TableCell>
<Stack display="flex" center>
<Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
{team.totalWins}
</Text>
</Stack>
<TableCell textAlign="center">
<Text font="mono" weight="semibold" variant={sortBy === 'wins' ? 'primary' : 'high'}>
{team.totalWins}
</Text>
</TableCell>
</TableRow>
))}