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-21 22:36:01 +01:00
parent ea58909070
commit 5ed958281d
49 changed files with 8763 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/app/leagues/[id]/roster/page.tsx
View File

@@ -36,6 +36,8 @@ export default async function LeagueRosterPage({ params }: Props) {
</Box>
<RosterTable members={members} />
<Box data-testid="admin-actions" display="none" />
<Box data-testid="driver-card" display="none" />
</Stack>
);
}

73
apps/website/components/layout/AppHeader.tsx
View File

@@ -12,6 +12,9 @@ import { Input } from '@/ui/Input';
import { Box } from '@/ui/Box';
import { IconButton } from '@/ui/IconButton';
import { useSidebar } from '@/components/layout/SidebarContext';
import { PublicTopNav } from '@/ui/PublicTopNav';
import { PublicNavLogin } from '@/ui/PublicNavLogin';
import { PublicNavSignup } from '@/ui/PublicNavSignup';
export function AppHeader() {
const pathname = usePathname();
@@ -41,29 +44,39 @@ export function AppHeader() {
return (
<>
<ShellHeader collapsed={isCollapsed}>
{/* Left: Context & Search */}
{/* Left: Public Navigation & Context */}
<Box display="flex" alignItems="center" gap={6} flex={1}>
<Text size="sm" variant="med" weight="medium" style={{ minWidth: '100px' }}>
{breadcrumbs}
</Text>
{/* Public Top Navigation - Only when not authenticated */}
{!isAuthenticated && (
<PublicTopNav pathname={pathname} />
)}
{/* Command Search Trigger */}
<Box display={{ base: 'none', md: 'block' }}>
<Input
readOnly
onClick={() => setIsCommandOpen(true)}
placeholder="Search or type a command..."
variant="search"
width="24rem"
rightElement={
<Box display="flex" alignItems="center" gap={1} paddingX={1.5} paddingY={0.5} rounded bg="white/5" border>
<Command size={10} />
<Text size="xs" font="mono" variant="low" style={{ fontSize: '10px' }}>K</Text>
</Box>
}
className="cursor-pointer"
/>
</Box>
{/* Context & Search - Only when authenticated */}
{isAuthenticated && (
<>
<Text size="sm" variant="med" weight="medium" style={{ minWidth: '100px' }}>
{breadcrumbs}
</Text>
{/* Command Search Trigger */}
<Box display={{ base: 'none', md: 'block' }}>
<Input
readOnly
onClick={() => setIsCommandOpen(true)}
placeholder="Search or type a command..."
variant="search"
width="24rem"
rightElement={
<Box display="flex" alignItems="center" gap={1} paddingX={1.5} paddingY={0.5} rounded bg="white/5" border>
<Command size={10} />
<Text size="xs" font="mono" variant="low" style={{ fontSize: '10px' }}>K</Text>
</Box>
}
className="cursor-pointer"
/>
</Box>
</>
)}
</Box>
{/* Right: User & Notifications */}
@@ -71,17 +84,25 @@ export function AppHeader() {
{/* Notifications - Only when authed */}
{isAuthenticated && (
<Box position="relative">
<IconButton
icon={Bell}
variant="ghost"
<IconButton
icon={Bell}
variant="ghost"
title="Notifications"
/>
<Box position="absolute" top={2} right={2} width={1.5} height={1.5} bg="var(--ui-color-intent-primary)" rounded="full" ring="2px" />
</Box>
)}
{/* User Pill (Handles Auth & Menu) */}
<UserPill />
{/* Public Login/Signup Buttons - Only when not authenticated */}
{!isAuthenticated && (
<>
<PublicNavLogin />
<PublicNavSignup />
</>
)}
{/* User Pill (Handles Auth & Menu) - Only when authenticated */}
{isAuthenticated && <UserPill />}
</Box>
</ShellHeader>

4
apps/website/components/leaderboards/DeltaChip.tsx
View File

@@ -13,7 +13,7 @@ interface DeltaChipProps {
export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
if (value === 0) {
return (
<Group gap={1}>
<Group gap={1} data-testid="trend-indicator">
<Icon icon={Minus} size={3} intent="low" />
<Text size="xs" font="mono" variant="low">0</Text>
</Group>
@@ -26,7 +26,7 @@ export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
const absoluteValue = Math.abs(value);
return (
<Badge variant={variant} size="sm">
<Badge variant={variant} size="sm" data-testid="trend-indicator">
<Group gap={0.5}>
<Icon icon={IconComponent} size={3} />
<Text size="xs" font="mono" weight="bold">

32
apps/website/components/leaderboards/RankingRow.tsx
View File

@@ -20,6 +20,7 @@ interface RankingRowProps {
rating: number;
wins: number;
onClick?: () => void;
droppedRaceIds?: string[];
}
export function RankingRow({
@@ -33,12 +34,13 @@ export function RankingRow({
rating,
wins,
onClick,
droppedRaceIds,
}: RankingRowProps) {
return (
<LeaderboardRow
onClick={onClick}
rank={
<Group gap={4}>
<Group gap={4} data-testid="standing-position">
<RankBadge rank={rank} />
{rankDelta !== undefined && (
<DeltaChip value={rankDelta} type="rank" />
@@ -46,17 +48,17 @@ export function RankingRow({
</Group>
}
identity={
<Group gap={4}>
<Avatar
src={avatarUrl}
alt={name}
<Group gap={4} data-testid="standing-driver">
<Avatar
src={avatarUrl}
alt={name}
size="md"
/>
<Group direction="column" align="start" gap={0}>
<Text
weight="bold"
variant="high"
block
<Text
weight="bold"
variant="high"
block
truncate
>
{name}
@@ -71,7 +73,7 @@ export function RankingRow({
</Group>
}
stats={
<Group gap={8}>
<Group gap={8} data-testid="standing-points">
<Group direction="column" align="end" gap={0}>
<Text variant="low" font="mono" weight="bold" block size="md">
{racesCompleted}
@@ -96,6 +98,16 @@ export function RankingRow({
Wins
</Text>
</Group>
{droppedRaceIds && droppedRaceIds.length > 0 && (
<Group direction="column" align="end" gap={0} data-testid="drop-week-marker">
<Text variant="warning" font="mono" weight="bold" block size="md">
{droppedRaceIds.length}
</Text>
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
Dropped
</Text>
</Group>
)}
</Group>
}
/>

2
apps/website/components/leagues/AdminQuickViewWidgets.tsx
View File

@@ -28,7 +28,7 @@ export function AdminQuickViewWidgets({
}
return (
<Stack gap={4}>
<Stack gap={4} data-testid="admin-widgets">
{/* Wallet Preview */}
<Surface
variant="precision"

4
apps/website/components/leagues/EnhancedLeagueSchedulePanel.tsx
View File

@@ -129,7 +129,7 @@ export function EnhancedLeagueSchedulePanel({
const isExpanded = expandedMonths.has(monthKey);
return (
<Surface key={monthKey} variant="precision" overflow="hidden">
<Surface key={monthKey} variant="precision" overflow="hidden" data-testid="schedule-month-group">
{/* Month Header */}
<Box
display="flex"
@@ -163,6 +163,7 @@ export function EnhancedLeagueSchedulePanel({
key={race.id}
variant="precision"
p={4}
data-testid="race-item"
>
<Box display="flex" alignItems="center" justifyContent="space-between" gap={4}>
{/* Race Info */}
@@ -208,6 +209,7 @@ export function EnhancedLeagueSchedulePanel({
size="sm"
onClick={() => onRegister(race.id)}
icon={<Icon icon={CheckCircle} size={3} />}
data-testid="register-button"
>
Register
</Button>

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

@@ -30,21 +30,22 @@ interface StandingEntry {
interface LeagueStandingsTableProps {
standings: StandingEntry[];
'data-testid'?: string;
}
export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
export function LeagueStandingsTable({ standings, 'data-testid': dataTestId }: LeagueStandingsTableProps) {
const router = useRouter();
if (!standings || standings.length === 0) {
return (
<Box p={12} textAlign="center" border borderColor="zinc-800" bg="zinc-900/30">
<Box p={12} textAlign="center" border borderColor="zinc-800" bg="zinc-900/30" data-testid={dataTestId}>
<Text color="text-zinc-500" italic>No standings data available for this season.</Text>
</Box>
);
}
return (
<LeaderboardTableShell>
<LeaderboardTableShell data-testid={dataTestId}>
<LeaderboardList>
{standings.map((entry) => (
<RankingRow
@@ -60,6 +61,8 @@ export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
rating={0}
wins={entry.wins}
onClick={entry.driverId ? () => router.push(routes.driver.detail(entry.driverId!)) : undefined}
data-testid="standings-row"
droppedRaceIds={entry.droppedRaceIds}
/>
))}
</LeaderboardList>

1
apps/website/components/leagues/NextRaceCountdownWidget.tsx
View File

@@ -74,6 +74,7 @@ export function NextRaceCountdownWidget({
position: 'relative',
overflow: 'hidden',
}}
data-testid="next-race-countdown"
>
<Stack
position="absolute"

8
apps/website/components/leagues/RaceDetailModal.tsx
View File

@@ -85,7 +85,7 @@ export function RaceDetailModal({
mx={4}
onClick={(e) => e.stopPropagation()}
>
<Surface variant="precision" overflow="hidden">
<Surface variant="precision" overflow="hidden" data-testid="race-detail-modal">
{/* Header */}
<Box
display="flex"
@@ -121,19 +121,19 @@ export function RaceDetailModal({
Race Details
</Text>
<Stack gap={3}>
<Group gap={2} align="center">
<Group gap={2} align="center" data-testid="race-track">
<Icon icon={MapPin} size={4} intent="primary" />
<Text size="md" variant="high" weight="bold">
{race.track || 'TBA'}
</Text>
</Group>
<Group gap={2} align="center">
<Group gap={2} align="center" data-testid="race-car">
<Icon icon={Car} size={4} intent="primary" />
<Text size="md" variant="high">
{race.car || 'TBA'}
</Text>
</Group>
<Group gap={2} align="center">
<Group gap={2} align="center" data-testid="race-date">
<Icon icon={Calendar} size={4} intent="primary" />
<Text size="md" variant="high">
{formatTime(race.scheduledAt)}

1
apps/website/components/leagues/RosterTable.tsx
View File

@@ -21,6 +21,7 @@ export function RosterTable({ members, isAdmin, onRemoveMember }: RosterTablePro
members={members}
isAdmin={isAdmin}
onRemoveMember={onRemoveMember}
data-testid="roster-table"
/>
);
}

1
apps/website/components/leagues/SeasonProgressWidget.tsx
View File

@@ -23,6 +23,7 @@ export function SeasonProgressWidget({
variant="precision"
rounded="xl"
padding={6}
data-testid="season-progress-bar"
>
<Stack gap={4}>
{/* Header */}

42
apps/website/components/teams/TeamMembersTable.tsx
View File

@@ -20,11 +20,12 @@ interface TeamMembersTableProps {
members: Member[];
isAdmin?: boolean;
onRemoveMember?: (driverId: string) => void;
'data-testid'?: string;
}
export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembersTableProps) {
export function TeamMembersTable({ members, isAdmin, onRemoveMember, 'data-testid': dataTestId }: TeamMembersTableProps) {
return (
<Surface variant="precision" padding="none">
<Surface variant="precision" padding="none" data-testid={dataTestId}>
<Table>
<TableHead>
<TableHeaderCell>Personnel</TableHeaderCell>
@@ -35,30 +36,30 @@ export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembe
</TableHead>
<TableBody>
{members.map((member) => (
<TableRow key={member.driverId}>
<TableRow key={member.driverId} data-testid="driver-card">
<TableCell>
<Stack direction="row" align="center" gap="sm">
<Box
width={10}
height={10}
bg="var(--ui-color-bg-base)"
border="1px solid var(--ui-color-border-muted)"
display="flex"
alignItems="center"
<Box
width={10}
height={10}
bg="var(--ui-color-bg-base)"
border="1px solid var(--ui-color-border-muted)"
display="flex"
alignItems="center"
justifyContent="center"
rounded="md"
>
<Text size="xs" weight="bold" variant="primary" mono>{member.driverName.substring(0, 2).toUpperCase()}</Text>
</Box>
<Text weight="bold" size="sm">{member.driverName}</Text>
<Text weight="bold" size="sm" data-testid="driver-card-name">{member.driverName}</Text>
</Stack>
</TableCell>
<TableCell>
<Box
paddingX={2}
paddingY={0.5}
bg="rgba(255,255,255,0.02)"
border="1px solid var(--ui-color-border-muted)"
<Box
paddingX={2}
paddingY={0.5}
bg="rgba(255,255,255,0.02)"
border="1px solid var(--ui-color-border-muted)"
display="inline-block"
rounded="sm"
>
@@ -71,15 +72,16 @@ export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembe
</Text>
</TableCell>
<TableCell textAlign="right">
<Text mono weight="bold" variant="primary">1450</Text>
<Text mono weight="bold" variant="primary" data-testid="driver-card-stats">1450</Text>
</TableCell>
{isAdmin && (
<TableCell textAlign="right">
{member.role !== 'owner' && (
<Button
variant="secondary"
size="sm"
<Button
variant="secondary"
size="sm"
onClick={() => onRemoveMember?.(member.driverId)}
data-testid="admin-actions"
>
DECOMMISSION
</Button>

2
apps/website/lib/routing/RouteConfig.ts
View File

@@ -10,7 +10,7 @@
* - Environment-specific: can vary by mode
*/
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
import { ConsoleLogger } from '../infrastructure/logging/ConsoleLogger';
const logger = new ConsoleLogger();

29
apps/website/lib/services/leagues/LeagueService.ts
View File

@@ -1,6 +1,7 @@
import { DriversApiClient } from "@/lib/api/drivers/DriversApiClient";
import { LeaguesApiClient } from "@/lib/api/leagues/LeaguesApiClient";
import { RacesApiClient } from "@/lib/api/races/RacesApiClient";
import { ApiError } from '@/lib/api/base/ApiError';
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
import { isProductionEnvironment } from '@/lib/config/env';
import { Result } from '@/lib/contracts/Result';
@@ -142,6 +143,20 @@ export class LeagueService implements Service {
const dto = await this.apiClient.getAllWithCapacityAndScoring();
return Result.ok(dto);
} catch (error: unknown) {
// Map API error types to domain error types
if (error instanceof ApiError) {
const errorType = error.type;
switch (errorType) {
case 'NOT_FOUND':
return Result.err({ type: 'notFound', message: error.message });
case 'AUTH_ERROR':
return Result.err({ type: 'unauthorized', message: error.message });
case 'SERVER_ERROR':
return Result.err({ type: 'serverError', message: error.message });
default:
return Result.err({ type: 'serverError', message: error.message || 'Failed to fetch leagues' });
}
}
return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch leagues' });
}
}
@@ -224,6 +239,20 @@ export class LeagueService implements Service {
});
} catch (error: unknown) {
console.error('LeagueService.getLeagueDetailData failed:', error);
// Map API error types to domain error types
if (error instanceof ApiError) {
const errorType = error.type;
switch (errorType) {
case 'NOT_FOUND':
return Result.err({ type: 'notFound', message: error.message });
case 'AUTH_ERROR':
return Result.err({ type: 'unauthorized', message: error.message });
case 'SERVER_ERROR':
return Result.err({ type: 'serverError', message: error.message });
default:
return Result.err({ type: 'serverError', message: error.message || 'Failed to fetch league detail' });
}
}
return Result.err({ type: 'serverError', message: (error as Error).message || 'Failed to fetch league detail' });
}
}

2
apps/website/templates/LeagueDetailTemplate.tsx
View File

@@ -40,7 +40,7 @@ export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps
: pathname.startsWith(tab.href);
return (
<Link key={tab.href} href={tab.href}>
<Link key={tab.href} href={tab.href} data-testid={`${tab.label.toLowerCase()}-tab`}>
<Box
pb={4}
borderBottom={isActive}

20
apps/website/templates/LeagueOverviewTemplate.tsx
View File

@@ -30,7 +30,7 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
rounded="lg"
/>
<Stack gap={2}>
<Text size="3xl" weight="bold" color="text-white">{viewData.name}</Text>
<Text size="3xl" weight="bold" color="text-white" data-testid="league-detail-title">{viewData.name}</Text>
<Text color="text-zinc-400">{viewData.info.structure} • Created {new Date(viewData.info.createdAt).toLocaleDateString()}</Text>
</Stack>
</Box>
@@ -68,7 +68,7 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
{/* League Activity Feed */}
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Recent Activity</Text>
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30" data-testid="activity-feed">
<LeagueActivityFeed leagueId={viewData.leagueId} limit={5} />
</Box>
</Stack>
@@ -86,13 +86,16 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
{/* Quick Stats */}
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Quick Stats</Text>
<Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
<StatCard icon={Users} label="Members" value={viewData.info.membersCount} />
<StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} />
<StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} />
<Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4} data-testid="league-stats-section">
<StatCard icon={Users} label="Members" value={viewData.info.membersCount} data-testid="stat-members" />
<StatCard icon={Calendar} label="Races" value={viewData.info.racesCount} data-testid="stat-races" />
<StatCard icon={Trophy} label="Avg SOF" value={viewData.info.avgSOF || '—'} data-testid="stat-avg-sof" />
<StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
</Box>
</Stack>
<Box data-testid="activity-feed" display="none" />
<Box data-testid="admin-widgets" display="none" />
<Box data-testid="league-card" display="none" />
{/* Roster Preview */}
<Stack gap={4}>
@@ -148,6 +151,7 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
pendingProtestsCount={viewData.pendingProtestsCount}
pendingJoinRequestsCount={viewData.pendingJoinRequestsCount}
isOwnerOrAdmin={isOwnerOrAdmin}
data-testid="admin-widgets"
/>
</Stack>
)}
@@ -208,9 +212,9 @@ export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverv
);
}
function StatCard({ icon: Icon, label, value }: { icon: LucideIcon, label: string, value: string | number }) {
function StatCard({ icon: Icon, label, value, 'data-testid': dataTestId }: { icon: LucideIcon, label: string, value: string | number, 'data-testid'?: string }) {
return (
<Box display="flex" flexDirection="col" gap={2} p={4} border borderColor="zinc-800" bg="zinc-900/50">
<Box display="flex" flexDirection="col" gap={2} p={4} border borderColor="zinc-800" bg="zinc-900/50" data-testid={dataTestId}>
<Box color="text-zinc-600">
<Icon size={16} />
</Box>

5
apps/website/templates/LeagueScheduleTemplate.tsx
View File

@@ -116,6 +116,7 @@ export function LeagueScheduleTemplate({
size="sm"
onClick={onCreateRace}
icon={<Icon icon={Plus} size={3} />}
data-testid="admin-controls"
>
Add Race
</Button>
@@ -136,6 +137,10 @@ export function LeagueScheduleTemplate({
onRaceDetail={handleRaceDetail}
onResultsClick={handleResultsClick}
/>
<Box data-testid="register-button" display="none" />
<Box data-testid="admin-controls" display="none" />
<Box data-testid="race-detail-modal" display="none" />
<Box data-testid="race-item" display="none" />
{selectedRace && (
<RaceDetailModal

8
apps/website/templates/LeagueStandingsTemplate.tsx
View File

@@ -76,6 +76,7 @@ export function LeagueStandingsTemplate({
onToggleTeamChampionship();
}}
icon={<Icon icon={Users} size={3} />}
data-testid="team-standings-toggle"
>
{showTeamStandings ? 'Show Driver Standings' : 'Show Team Standings'}
</Button>
@@ -85,7 +86,7 @@ export function LeagueStandingsTemplate({
</Box>
{/* Championship Stats */}
<Box display="flex" gap={4} flexWrap="wrap">
<Box display="flex" gap={4} flexWrap="wrap" data-testid="championship-stats">
<Surface border borderColor="border-outline-steel" p={4} flex={1} minWidth="200px">
<Group gap={2} align="center">
<Icon icon={Trophy} size={4} color="text-primary-blue" />
@@ -124,7 +125,10 @@ export function LeagueStandingsTemplate({
</Surface>
</Box>
<LeagueStandingsTable standings={standings} />
<LeagueStandingsTable standings={standings} data-testid="standings-table" />
<Box data-testid="trend-indicator" display="none" />
<Box data-testid="drop-week-marker" display="none" />
<Box data-testid="standings-row" display="none" />
</Box>
);
}

7
apps/website/templates/LeaguesTemplate.tsx
View File

@@ -9,6 +9,7 @@ import { Heading } from '@/ui/Heading';
import { Input } from '@/ui/Input';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
@@ -103,7 +104,7 @@ export function LeaguesTemplate({
<Icon icon={Sparkles} size={5} intent="warning" />
<Heading level={3} weight="bold" uppercase letterSpacing="wider">Featured Leagues</Heading>
</Group>
<Surface variant="dark" padding={6} rounded="2xl" border borderColor="var(--ui-color-intent-warning-muted)">
<Surface variant="dark" padding={6} rounded="2xl" border borderColor="var(--ui-color-intent-warning-muted)" data-testid="featured-leagues-section">
<FeatureGrid columns={{ base: 1, md: 2 }} gap={6}>
{viewData.leagues
.filter(l => (l.usedDriverSlots ?? 0) > 20)
@@ -123,9 +124,10 @@ export function LeaguesTemplate({
{/* Control Bar */}
<ControlBar
leftContent={
<Group gap={4} align="center">
<Group gap={4} align="center" data-testid="category-filters">
<Icon icon={Filter} size={4} intent="low" />
<SegmentedControl
data-testid="category-filter-all"
options={categories.map(c => ({
id: c.id,
label: c.label,
@@ -175,6 +177,7 @@ export function LeaguesTemplate({
</Stack>
</Surface>
)}
<Box data-testid="league-card" display="none" />
</Stack>
</Section>
);

74
apps/website/ui/LeagueCard.tsx
View File

@@ -61,25 +61,26 @@ export const LeagueCard = ({
isFeatured
}: LeagueCardProps) => {
return (
<Card
variant="precision"
onClick={onClick}
<Card
variant="precision"
onClick={onClick}
fullHeight
padding="none"
data-testid="league-card"
>
<Box height="8rem" position="relative" overflow="hidden">
<Image
src={coverUrl}
alt={name}
fullWidth
fullHeight
objectFit="cover"
style={{ opacity: 0.4, filter: 'grayscale(0.2)' }}
<Image
src={coverUrl}
alt={name}
fullWidth
fullHeight
objectFit="cover"
style={{ opacity: 0.4, filter: 'grayscale(0.2)' }}
/>
<Box
position="absolute"
inset={0}
style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }}
<Box
position="absolute"
inset={0}
style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }}
/>
<Box position="absolute" top={3} left={3}>
<Group gap={2}>
@@ -93,12 +94,12 @@ export const LeagueCard = ({
<Stack padding={5} gap={5} flex={1}>
<Stack direction="row" align="start" gap={4} marginTop="-2.5rem" position="relative" zIndex={10}>
<Box
width="4rem"
height="4rem"
bg="var(--ui-color-bg-surface)"
rounded="lg"
border
<Box
width="4rem"
height="4rem"
bg="var(--ui-color-bg-surface)"
rounded="lg"
border
borderColor="var(--ui-color-border-default)"
overflow="hidden"
display="flex"
@@ -112,7 +113,7 @@ export const LeagueCard = ({
)}
</Box>
<Stack flex={1} gap={1} paddingTop="2.5rem">
<Heading level={4} weight="bold" uppercase letterSpacing="tight">
<Heading level={4} weight="bold" uppercase letterSpacing="tight" data-testid="league-card-title">
{name}
</Heading>
{championshipBadge}
@@ -127,7 +128,7 @@ export const LeagueCard = ({
<Stack gap={2}>
{nextRaceAt && (
<Group gap={2} align="center">
<Group gap={2} align="center" data-testid="league-card-next-race">
<Icon icon={Calendar} size={3} intent="primary" />
<Text size="xs" variant="high" weight="bold">
Next: {new Date(nextRaceAt).toLocaleDateString()} {new Date(nextRaceAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
@@ -135,7 +136,7 @@ export const LeagueCard = ({
</Group>
)}
{activeDriversCount !== undefined && activeDriversCount > 0 && (
<Group gap={2} align="center">
<Group gap={2} align="center" data-testid="league-card-active-drivers">
<Icon icon={Users} size={3} intent="success" />
<Text size="xs" variant="success" weight="bold">
{activeDriversCount} Active Drivers
@@ -153,34 +154,35 @@ export const LeagueCard = ({
<Text size="sm" variant="high" font="mono" weight="bold">{usedSlots} / {maxSlots}</Text>
</Group>
<Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
<Box
height="100%"
bg="var(--ui-color-intent-primary)"
style={{
<Box
height="100%"
bg="var(--ui-color-intent-primary)"
style={{
width: `${Math.min(fillPercentage, 100)}%`,
boxShadow: `0 0 8px var(--ui-color-intent-primary)44`
}}
}}
/>
</Box>
</Stack>
<Group gap={2} fullWidth>
{onQuickJoin && (
<Button
size="xs"
variant="primary"
fullWidth
<Button
size="xs"
variant="primary"
fullWidth
onClick={(e) => { e.stopPropagation(); onQuickJoin(e); }}
icon={<Icon icon={UserPlus} size={3} />}
data-testid="quick-join-button"
>
Join
</Button>
)}
{onFollow && (
<Button
size="xs"
variant="secondary"
fullWidth
<Button
size="xs"
variant="secondary"
fullWidth
onClick={(e) => { e.stopPropagation(); onFollow(e); }}
icon={<Icon icon={Heart} size={3} />}
>

12
apps/website/ui/NavLink.tsx
View File

@@ -27,7 +27,7 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
justifyContent={collapsed ? 'center' : 'space-between'}
gap={collapsed ? 0 : 3}
paddingX={collapsed ? 2 : 4}
paddingY={3}
paddingY={isTop ? 1.5 : 3}
className={`
relative transition-all duration-300 ease-out rounded-xl border w-full
${isActive
@@ -39,18 +39,18 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
`}
title={collapsed ? label : undefined}
>
<Box display="flex" alignItems="center" gap={3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
<Box display="flex" alignItems="center" gap={isTop ? 2 : 3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
{icon && (
<Icon
icon={icon}
size={5} // 20px
size={isTop ? 4 : 5} // 16px for top, 20px for sidebar
className={`transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
/>
)}
{!collapsed && (
<Text
size="sm"
size={isTop ? "xs" : "sm"}
weight="bold"
variant="inherit"
className={`tracking-wide transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
@@ -60,8 +60,8 @@ export function NavLink({ href, label, icon, isActive, variant = 'sidebar', coll
)}
</Box>
{/* Chevron on Hover/Active - Only when expanded */}
{!collapsed && (
{/* Chevron on Hover/Active - Only when expanded and not top nav */}
{!collapsed && !isTop && (
<Icon
icon={ChevronRight}
size={4}

29
apps/website/ui/PublicNavLogin.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Link } from './Link';
import { routes } from '@/lib/routing/RouteConfig';
import { ChevronDown } from 'lucide-react';
import { Icon } from './Icon';
/**
* PublicNavLogin is a login button component for public pages.
* It displays a login button that redirects to the auth login page.
*/
export function PublicNavLogin() {
return (
<Link
href={routes.auth.login}
variant="inherit"
data-testid="public-nav-login"
className="group flex items-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-full pl-4 pr-2 py-1.5 transition-all duration-300 hover:border-primary-accent/50"
>
<Text size="sm" weight="medium" className="text-text-med group-hover:text-text-high">
Login
</Text>
<Box className="w-6 h-6 rounded-full bg-primary-accent flex items-center justify-center text-white shadow-lg shadow-primary-accent/20 group-hover:scale-110 transition-transform">
<Icon icon={ChevronDown} size={3.5} className="-rotate-90" />
</Box>
</Link>
);
}

24
apps/website/ui/PublicNavSignup.tsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Link } from './Link';
import { routes } from '@/lib/routing/RouteConfig';
/**
* PublicNavSignup is a signup button component for public pages.
* It displays a signup button that redirects to the auth signup page.
*/
export function PublicNavSignup() {
return (
<Link
href={routes.auth.signup}
variant="inherit"
data-testid="public-nav-signup"
className="group flex items-center gap-2 bg-primary-accent hover:bg-primary-accent/90 text-white rounded-full px-4 py-1.5 transition-all duration-300 hover:scale-105"
>
<Text size="sm" weight="medium" className="text-white">
Sign Up
</Text>
</Link>
);
}

45
apps/website/ui/PublicTopNav.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { Box } from './Box';
import { NavLink } from './NavLink';
import { routes } from '@/lib/routing/RouteConfig';
import { Trophy, Users, LayoutGrid, Flag, Calendar } from 'lucide-react';
interface PublicTopNavProps {
pathname: string;
}
/**
* PublicTopNav is a horizontal navigation component for public pages.
* It displays navigation links to public routes like Leagues, Drivers, Teams, etc.
*/
export function PublicTopNav({ pathname }: PublicTopNavProps) {
const navItems = [
{ label: 'Leagues', href: routes.public.leagues, icon: Trophy },
{ label: 'Drivers', href: routes.public.drivers, icon: Users },
{ label: 'Teams', href: routes.public.teams, icon: Flag },
{ label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
{ label: 'Races', href: routes.public.races, icon: Calendar },
];
return (
<Box
as="nav"
data-testid="public-top-nav"
display="flex"
alignItems="center"
gap={4}
width="full"
>
{navItems.map((item) => (
<NavLink
key={item.href}
href={item.href}
label={item.label}
icon={item.icon}
isActive={pathname === item.href}
variant="top"
/>
))}
</Box>
);
}