website refactor

This commit is contained in:
2026-01-21 17:50:02 +01:00
parent 4b54c3603b
commit 02987f60c8
29 changed files with 1673 additions and 35 deletions

View File

@@ -1,6 +1,10 @@
'use client';
import { AdminQuickViewWidgets } from '@/components/leagues/AdminQuickViewWidgets';
import { LeagueActivityFeed } from '@/components/leagues/LeagueActivityFeed';
import { LeagueLogo } from '@/components/leagues/LeagueLogo';
import { NextRaceCountdownWidget } from '@/components/leagues/NextRaceCountdownWidget';
import { SeasonProgressWidget } from '@/components/leagues/SeasonProgressWidget';
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
@@ -10,18 +14,19 @@ import { Calendar, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';
interface LeagueOverviewTemplateProps {
viewData: LeagueDetailViewData;
isOwnerOrAdmin: boolean;
}
export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps) {
export function LeagueOverviewTemplate({ viewData, isOwnerOrAdmin }: LeagueOverviewTemplateProps) {
return (
<Stack gap={8}>
{/* Header with Logo */}
<Box display="flex" alignItems="center" gap={6} pb={8} borderBottom borderColor="zinc-800">
<LeagueLogo
leagueId={viewData.leagueId}
src={viewData.logoUrl}
alt={viewData.name}
size={96}
<LeagueLogo
leagueId={viewData.leagueId}
src={viewData.logoUrl}
alt={viewData.name}
size={96}
rounded="lg"
/>
<Stack gap={2}>
@@ -34,6 +39,41 @@ export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps
{/* Main Content */}
<Box responsiveColSpan={{ lg: 2 }}>
<Stack gap={8}>
{/* Next Race Section */}
{viewData.nextRace && (
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Next Race</Text>
<NextRaceCountdownWidget
raceId={viewData.nextRace.id}
raceName={viewData.nextRace.name}
date={viewData.nextRace.date}
track={viewData.nextRace.track}
car={viewData.nextRace.car}
/>
</Stack>
)}
{/* Season Progress Section */}
{viewData.seasonProgress && (
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Season Progress</Text>
<SeasonProgressWidget
completedRaces={viewData.seasonProgress.completedRaces}
totalRaces={viewData.seasonProgress.totalRaces}
percentage={viewData.seasonProgress.percentage}
/>
</Stack>
)}
{/* 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">
<LeagueActivityFeed leagueId={viewData.leagueId} limit={5} />
</Box>
</Stack>
{/* About the League */}
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">About the League</Text>
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
@@ -43,6 +83,7 @@ export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps
</Box>
</Stack>
{/* 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}>
@@ -97,6 +138,20 @@ export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps
{/* Sidebar */}
<Box as="aside">
<Stack gap={8}>
{/* Admin Quick-View Widgets */}
{isOwnerOrAdmin && (
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Admin Tools</Text>
<AdminQuickViewWidgets
leagueId={viewData.leagueId}
walletBalance={viewData.walletBalance}
pendingProtestsCount={viewData.pendingProtestsCount}
pendingJoinRequestsCount={viewData.pendingJoinRequestsCount}
isOwnerOrAdmin={isOwnerOrAdmin}
/>
</Stack>
)}
<Stack gap={4}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Management</Text>
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">