website refactor
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Clock, MapPin } from 'lucide-react';
|
||||
import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
|
||||
interface RaceEvent {
|
||||
id: string;
|
||||
@@ -20,79 +19,21 @@ interface LeagueSchedulePanelProps {
|
||||
}
|
||||
|
||||
export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
|
||||
const router = useRouter();
|
||||
|
||||
const races = events.map(event => ({
|
||||
id: event.id,
|
||||
track: event.trackName,
|
||||
car: 'TBA', // Not provided in event
|
||||
leagueName: null,
|
||||
time: event.time,
|
||||
status: (event.status === 'completed' ? 'completed' : 'scheduled') as any
|
||||
}));
|
||||
|
||||
return (
|
||||
<Stack as="section">
|
||||
<Stack gap={4}>
|
||||
{events.map((event) => (
|
||||
<Stack
|
||||
as="article"
|
||||
key={event.id}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={6}
|
||||
p={4}
|
||||
border
|
||||
borderColor="zinc-800"
|
||||
bg="zinc-900/50"
|
||||
hoverBorderColor="zinc-700"
|
||||
transition
|
||||
>
|
||||
<Stack display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase>
|
||||
{new Date(event.date).toLocaleDateString('en-US', { month: 'short' })}
|
||||
</Text>
|
||||
<Text size="2xl" weight="bold" color="text-white">
|
||||
{new Date(event.date).toLocaleDateString('en-US', { day: 'numeric' })}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack flexGrow={1}>
|
||||
<Heading level={3} fontSize="lg" weight="bold" color="text-white">{event.title}</Heading>
|
||||
<Stack direction="row" gap={4} mt={1}>
|
||||
<Stack display="flex" alignItems="center" gap={1.5}>
|
||||
<Stack color="text-zinc-600"><MapPin size={14} /></Stack>
|
||||
<Text size="sm" color="text-zinc-400">{event.trackName}</Text>
|
||||
</Stack>
|
||||
<Stack display="flex" alignItems="center" gap={1.5}>
|
||||
<Stack color="text-zinc-600"><Clock size={14} /></Stack>
|
||||
<Text size="sm" color="text-zinc-400">{event.time}</Text>
|
||||
</Stack>
|
||||
{event.strengthOfField && (
|
||||
<Stack display="flex" alignItems="center" gap={1.5}>
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase>SOF</Text>
|
||||
<Text size="sm" color="text-zinc-300" font="mono">{event.strengthOfField}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack display="flex" alignItems="center" gap={3}>
|
||||
{event.status === 'live' && (
|
||||
<Stack display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
|
||||
<Stack w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
|
||||
<Text size="xs" weight="bold" color="text-red-500" uppercase letterSpacing="0.05em">
|
||||
Live
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
{event.status === 'upcoming' && (
|
||||
<Stack px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
|
||||
<Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">
|
||||
Upcoming
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
{event.status === 'completed' && (
|
||||
<Stack px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="0.05em">
|
||||
Results
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<RaceScheduleTable
|
||||
races={races}
|
||||
onRaceClick={(id) => router.push(routes.race.detail(id))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,84 +1,26 @@
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface Member {
|
||||
driverId: string;
|
||||
driverName: string;
|
||||
role: string;
|
||||
joinedAt: string;
|
||||
joinedAtLabel: string;
|
||||
}
|
||||
|
||||
interface RosterTableProps {
|
||||
children: ReactNode;
|
||||
columns?: string[];
|
||||
members: Member[];
|
||||
isAdmin?: boolean;
|
||||
onRemoveMember?: (driverId: string) => void;
|
||||
}
|
||||
|
||||
export function RosterTable({ children, columns = ['Driver', 'Role', 'Joined', 'Rating', 'Rank'] }: RosterTableProps) {
|
||||
export function RosterTable({ members, isAdmin, onRemoveMember }: RosterTableProps) {
|
||||
return (
|
||||
<Stack border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
|
||||
<Table>
|
||||
<TableHead className="bg-base-graphite/50">
|
||||
<TableRow>
|
||||
{columns.map((col) => (
|
||||
<TableHeader key={col} className="py-3 border-b border-border-steel-grey">
|
||||
<Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-widest" block>
|
||||
{col}
|
||||
</Text>
|
||||
</TableHeader>
|
||||
))}
|
||||
<TableHeader className="py-3 border-b border-border-steel-grey">
|
||||
{null}
|
||||
</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{children}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
interface RosterTableRowProps {
|
||||
driver: ReactNode;
|
||||
role: ReactNode;
|
||||
joined: string;
|
||||
rating: ReactNode;
|
||||
rank: ReactNode;
|
||||
actions?: ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function RosterTableRow({
|
||||
driver,
|
||||
role,
|
||||
joined,
|
||||
rating,
|
||||
rank,
|
||||
actions,
|
||||
onClick,
|
||||
}: RosterTableRowProps) {
|
||||
return (
|
||||
<TableRow
|
||||
onClick={onClick}
|
||||
clickable={!!onClick}
|
||||
className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
|
||||
>
|
||||
<TableCell className="py-4">
|
||||
{driver}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
{role}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
<Text size="sm" color="text-gray-400" font="mono">{joined}</Text>
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
{rating}
|
||||
</TableCell>
|
||||
<TableCell className="py-4">
|
||||
{rank}
|
||||
</TableCell>
|
||||
<TableCell className="py-4 text-right">
|
||||
<Stack direction="row" align="center" justify="end" gap={2}>
|
||||
{actions}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TeamMembersTable
|
||||
members={members}
|
||||
isAdmin={isAdmin}
|
||||
onRemoveMember={onRemoveMember}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
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';
|
||||
|
||||
interface PointsTableProps {
|
||||
@@ -16,10 +16,8 @@ export function PointsTable({ title = 'Points Distribution', points }: PointsTab
|
||||
<Box overflow="auto">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Position</TableHeader>
|
||||
<TableHeader className="text-right">Points</TableHeader>
|
||||
</TableRow>
|
||||
<TableHeaderCell>Position</TableHeaderCell>
|
||||
<TableHeaderCell textAlign="right">Points</TableHeaderCell>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{points.map(({ position, points: pts }) => (
|
||||
@@ -50,7 +48,7 @@ export function PointsTable({ title = 'Points Distribution', points }: PointsTab
|
||||
</Text>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell textAlign="right">
|
||||
<Text color="text-white" weight="semibold" className="tabular-nums">{pts}</Text>
|
||||
<Text color="text-gray-500" ml={1}>pts</Text>
|
||||
</TableCell>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
||||
import { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell } from '@/ui/Table';
|
||||
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
|
||||
@@ -24,12 +24,10 @@ export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps
|
||||
return (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Time</TableHeader>
|
||||
<TableHeader>Session Details</TableHeader>
|
||||
<TableHeader>League</TableHeader>
|
||||
<TableHeader textAlign="right">Status</TableHeader>
|
||||
</TableRow>
|
||||
<TableHeaderCell>Time</TableHeaderCell>
|
||||
<TableHeaderCell>Session Details</TableHeaderCell>
|
||||
<TableHeaderCell>League</TableHeaderCell>
|
||||
<TableHeaderCell textAlign="right">Status</TableHeaderCell>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{races.map((race) => (
|
||||
|
||||
Reference in New Issue
Block a user