website refactor
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user