website refactor
This commit is contained in:
@@ -1,12 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
|
||||
import { LeaderboardList } from '@/ui/LeaderboardList';
|
||||
import { RankingRow } from '@/components/leaderboards/RankingRow';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
|
||||
interface StandingEntry {
|
||||
position: number;
|
||||
driverName: string;
|
||||
driverId?: string; // Added to support navigation
|
||||
teamName?: string;
|
||||
points: number;
|
||||
wins: number;
|
||||
@@ -21,62 +24,27 @@ interface LeagueStandingsTableProps {
|
||||
}
|
||||
|
||||
export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<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>
|
||||
</TableHeader>
|
||||
<TableHeader className="px-4 py-3">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
|
||||
</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>
|
||||
</TableHeader>
|
||||
<TableHeader className="text-center px-4 py-3">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Races</Text>
|
||||
</TableHeader>
|
||||
<TableHeader className="text-center px-4 py-3">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Avg</Text>
|
||||
</TableHeader>
|
||||
<TableHeader className="text-right px-4 py-3">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
|
||||
</TableHeader>
|
||||
<TableHeader className="text-right px-4 py-3">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
|
||||
</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody className="divide-zinc-800">
|
||||
{standings.map((entry) => (
|
||||
<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>
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-3">
|
||||
<Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
|
||||
</TableCell>
|
||||
<TableCell className="hidden md:table-cell px-4 py-3">
|
||||
<Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
|
||||
</TableCell>
|
||||
<TableCell className="text-center px-4 py-3">
|
||||
<Text size="sm" color="text-zinc-400">{entry.races}</Text>
|
||||
</TableCell>
|
||||
<TableCell className="text-center px-4 py-3">
|
||||
<Text size="sm" color="text-zinc-400">{entry.avgFinish?.toFixed(1) || '—'}</Text>
|
||||
</TableCell>
|
||||
<TableCell className="text-right px-4 py-3">
|
||||
<Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
|
||||
</TableCell>
|
||||
<TableCell className="text-right px-4 py-3">
|
||||
<Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Stack>
|
||||
<LeaderboardTableShell>
|
||||
<LeaderboardList>
|
||||
{standings.map((entry) => (
|
||||
<RankingRow
|
||||
key={entry.driverId || entry.driverName}
|
||||
id={entry.driverId || ''}
|
||||
rank={entry.position}
|
||||
name={entry.driverName}
|
||||
avatarUrl="" // Not provided in StandingEntry
|
||||
nationality="INT"
|
||||
skillLevel="pro"
|
||||
racesCompleted={entry.races}
|
||||
rating={0}
|
||||
wins={entry.wins}
|
||||
onClick={entry.driverId ? () => router.push(routes.driver.detail(entry.driverId!)) : undefined}
|
||||
/>
|
||||
))}
|
||||
</LeaderboardList>
|
||||
</LeaderboardTableShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user