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-20 15:12:28 +01:00
parent a972bb4195
commit 94aaaff704
25 changed files with 793 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/website/components/teams/TeamStandingsPanel.tsx
View File

@@ -1,8 +1,10 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
interface Standing {
leagueId: string;
@@ -18,9 +20,9 @@ interface TeamStandingsPanelProps {
export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
return (
<Box border borderColor="outline-steel" bg="surface-charcoal/30">
<Box p={4} borderBottom borderColor="outline-steel">
<Text size="xs" weight="bold" color="text-gray-400" uppercase letterSpacing="widest">
<Surface variant="precision" padding="none">
<Box padding={6} borderBottom="1px solid var(--ui-color-border-muted)">
<Text size="xs" weight="bold" variant="low" uppercase letterSpacing="0.1em">
Active Campaign Standings
</Text>
</Box>
@@ -28,51 +30,49 @@ export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
{standings.length > 0 ? (
<Table>
<TableHead>
<TableRow>
<TableHeader>League</TableHeader>
<TableHeader textAlign="center">Pos</TableHeader>
<TableHeader textAlign="center">Races</TableHeader>
<TableHeader textAlign="right">Points</TableHeader>
</TableRow>
<TableHeaderCell>League</TableHeaderCell>
<TableHeaderCell textAlign="center">Pos</TableHeaderCell>
<TableHeaderCell textAlign="center">Races</TableHeaderCell>
<TableHeaderCell textAlign="right">Points</TableHeaderCell>
</TableHead>
<TableBody>
{standings.map((s) => (
<TableRow key={s.leagueId}>
<TableCell>
<Text weight="bold" size="sm" color="text-white">{s.leagueName}</Text>
<Text weight="bold" size="sm">{s.leagueName}</Text>
</TableCell>
<TableCell textAlign="center">
<Box
display="inline-flex"
center
w="6"
h="6"
bg={s.position <= 3 ? 'warning-amber/20' : 'base-black'}
border
borderColor={s.position <= 3 ? 'warning-amber/40' : 'outline-steel'}
width={8}
height={8}
bg={s.position <= 3 ? 'rgba(255, 190, 77, 0.1)' : 'var(--ui-color-bg-base)'}
border={s.position <= 3 ? '1px solid var(--ui-color-intent-warning)' : '1px solid var(--ui-color-border-muted)'}
rounded="md"
>
<Text size="xs" weight="bold" color={s.position <= 3 ? 'warning-amber' : 'text-gray-400'}>
<Text size="xs" weight="bold" variant={s.position <= 3 ? 'warning' : 'low'} mono>
{s.position}
</Text>
</Box>
</TableCell>
<TableCell textAlign="center">
<Text size="xs" color="text-gray-500" font="mono">{s.races}</Text>
<Text size="xs" variant="low" mono>{s.races}</Text>
</TableCell>
<TableCell textAlign="right">
<Text font="mono" weight="bold" color="telemetry-aqua">{s.points}</Text>
<Text mono weight="bold" variant="telemetry">{s.points}</Text>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<Box py={12} textAlign="center">
<Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
<Box paddingY={16} textAlign="center">
<Text variant="low" mono size="xs" uppercase letterSpacing="0.1em">
No active campaign telemetry
</Text>
</Box>
)}
</Box>
</Surface>
);
}