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-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
apps/website/components/leagues/LeagueStandingsTable.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
import { Stack } from '@/ui/Stack';
interface StandingEntry {
position: number;
@@ -20,61 +21,61 @@ interface LeagueStandingsTableProps {
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">
<Stack as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
<Table className="border-none rounded-none">
<TableHead>
<TableRow className="bg-zinc-900/80 border-zinc-800">
<TableHeader className="w-12 px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
</Box>
<Box as="th" px={4} py={3}>
</TableHeader>
<TableHeader className="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' }}>
</TableHeader>
<TableHeader className="hidden md:table-cell px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="center">
</TableHeader>
<TableHeader className="text-center px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Wins</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="center">
</TableHeader>
<TableHeader className="text-center px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Podiums</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="right">
</TableHeader>
<TableHeader className="text-right px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
</Box>
<Box as="th" px={4} py={3} textAlign="right">
</TableHeader>
<TableHeader className="text-right px-4 py-3">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
</Box>
</Box>
</Box>
<Box as="tbody">
</TableHeader>
</TableRow>
</TableHead>
<TableBody className="divide-zinc-800">
{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}>
<TableRow key={entry.driverName} className="border-zinc-800 hover:bg-zinc-800/50">
<TableCell className="px-4 py-3">
<Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
</Box>
<Box as="td" px={4} py={3}>
</TableCell>
<TableCell className="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' }}>
</TableCell>
<TableCell className="hidden md:table-cell px-4 py-3">
<Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="center">
</TableCell>
<TableCell className="text-center px-4 py-3">
<Text size="sm" color="text-zinc-400">{entry.wins}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="center">
</TableCell>
<TableCell className="text-center px-4 py-3">
<Text size="sm" color="text-zinc-400">{entry.podiums}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="right">
</TableCell>
<TableCell className="text-right px-4 py-3">
<Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
</Box>
<Box as="td" px={4} py={3} textAlign="right">
</TableCell>
<TableCell className="text-right px-4 py-3">
<Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
</Box>
</Box>
</TableCell>
</TableRow>
))}
</Box>
</Box>
</Box>
</TableBody>
</Table>
</Stack>
);
}