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-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
apps/website/components/leagues/LeagueStandingsTable.tsx Normal file
View File

@@ -0,0 +1,80 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
interface StandingEntry {
position: number;
driverName: string;
teamName?: string;
points: number;
wins: number;
podiums: number;
gap: string;
}
interface LeagueStandingsTableProps {
standings: StandingEntry[];
}
export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
return (
<Box as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
<Box as="table" w="full" textAlign="left">
<Box as="thead">
<Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
<Box as="th" px={4} py={3} w="12">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
</Box>
<Box as="th" px={4} py={3}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
</Box>
<Box as="th" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="center">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Wins</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="center">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Podiums</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="right">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="right">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
</Box>
</Box>
</Box>
<Box as="tbody">
{standings.map((entry) => (
<Box as="tr" key={entry.driverName} borderBottom borderColor="zinc-800" hoverBg="zinc-800/50" transition>
<Box as="td" px={4} py={3}>
<Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
</Box>
<Box as="td" px={4} py={3}>
<Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
</Box>
<Box as="td" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
<Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="center">
<Text size="sm" color="text-zinc-400">{entry.wins}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="center">
<Text size="sm" color="text-zinc-400">{entry.podiums}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="right">
<Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="right">
<Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
</Box>
</Box>
))}
</Box>
</Box>
</Box>
);
}