mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
apps/website/components/teams/TeamRankingsTable.tsx
View File

@@ -1,118 +0,0 @@
'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>
);
}