79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface Standing {
|
|
leagueId: string;
|
|
leagueName: string;
|
|
position: number;
|
|
points: number;
|
|
races: number;
|
|
}
|
|
|
|
interface TeamStandingsPanelProps {
|
|
standings: Standing[];
|
|
}
|
|
|
|
export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
|
|
return (
|
|
<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>
|
|
|
|
{standings.length > 0 ? (
|
|
<Table>
|
|
<TableHead>
|
|
<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">{s.leagueName}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="center">
|
|
<Box
|
|
display="inline-flex"
|
|
center
|
|
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" variant={s.position <= 3 ? 'warning' : 'low'} mono>
|
|
{s.position}
|
|
</Text>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell textAlign="center">
|
|
<Text size="xs" variant="low" mono>{s.races}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Text mono weight="bold" variant="telemetry">{s.points}</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
) : (
|
|
<Box paddingY={16} textAlign="center">
|
|
<Text variant="low" mono size="xs" uppercase letterSpacing="0.1em">
|
|
No active campaign telemetry
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
}
|