website refactor
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
|
||||
@@ -13,6 +14,8 @@ import { ChevronRight } from 'lucide-react';
|
||||
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
|
||||
|
||||
export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps<LeagueDetailViewData> & { children?: React.ReactNode, tabs?: any[] }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<Container size="lg">
|
||||
<Box paddingY={8}>
|
||||
@@ -26,8 +29,43 @@ export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps
|
||||
<Text size="sm" color="text-white">{viewData.name}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
{children}
|
||||
{/* ... rest of the template ... */}
|
||||
|
||||
{/* Tabs */}
|
||||
{tabs && tabs.length > 0 && (
|
||||
<Box borderBottom borderColor="zinc-800">
|
||||
<Box display="flex" gap={8}>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = tab.exact
|
||||
? pathname === tab.href
|
||||
: pathname.startsWith(tab.href);
|
||||
|
||||
return (
|
||||
<Link key={tab.href} href={tab.href}>
|
||||
<Box
|
||||
pb={4}
|
||||
borderBottom={isActive}
|
||||
borderWidth={isActive ? 2 : 0}
|
||||
borderColor={isActive ? "blue-500" : "transparent"}
|
||||
>
|
||||
<Text
|
||||
size="sm"
|
||||
weight={isActive ? "bold" : "medium"}
|
||||
color={isActive ? "text-white" : "text-zinc-500"}
|
||||
className="transition-colors hover:text-white"
|
||||
>
|
||||
{tab.label}
|
||||
</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box>
|
||||
{children}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { LeagueLogo } from '@/components/leagues/LeagueLogo';
|
||||
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Calendar, Shield, Trophy, Users, type LucideIcon } from 'lucide-react';
|
||||
|
||||
interface LeagueOverviewTemplateProps {
|
||||
@@ -12,86 +14,139 @@ interface LeagueOverviewTemplateProps {
|
||||
|
||||
export function LeagueOverviewTemplate({ viewData }: LeagueOverviewTemplateProps) {
|
||||
return (
|
||||
<Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={8}>
|
||||
{/* Main Content */}
|
||||
<Box responsiveColSpan={{ lg: 2 }}>
|
||||
<Stack gap={8}>
|
||||
<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">
|
||||
<Text color="text-zinc-300" leading="relaxed">
|
||||
{viewData.description || 'No description provided for this league.'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<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 || '—'} />
|
||||
<StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
|
||||
</Box>
|
||||
</Stack>
|
||||
<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}
|
||||
rounded="lg"
|
||||
/>
|
||||
<Stack gap={2}>
|
||||
<Text size="3xl" weight="bold" color="text-white">{viewData.name}</Text>
|
||||
<Text color="text-zinc-400">{viewData.info.structure} • Created {new Date(viewData.info.createdAt).toLocaleDateString()}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Sidebar */}
|
||||
<Box as="aside">
|
||||
<Stack gap={8}>
|
||||
<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">
|
||||
<Stack gap={4}>
|
||||
{viewData.ownerSummary && (
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box w="10" h="10" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-zinc-500">
|
||||
<Users size={20} />
|
||||
</Box>
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Owner</Text>
|
||||
<Text size="sm" weight="bold" color="text-white">{viewData.ownerSummary.driverName}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
<Stack gap={2}>
|
||||
<Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Admins</Text>
|
||||
<Box display="flex" flexWrap="wrap" gap={2}>
|
||||
{viewData.adminSummaries.map(admin => (
|
||||
<Box key={admin.driverId} px={2} py={1} bg="zinc-800" color="text-zinc-400" border borderColor="zinc-700">
|
||||
<Text size="xs" weight="bold" uppercase fontSize="10px">{admin.driverName}</Text>
|
||||
</Box>
|
||||
<Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={8}>
|
||||
{/* Main Content */}
|
||||
<Box responsiveColSpan={{ lg: 2 }}>
|
||||
<Stack gap={8}>
|
||||
<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">
|
||||
<Text color="text-zinc-300" leading="relaxed">
|
||||
{viewData.description || 'No description provided for this league.'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<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 || '—'} />
|
||||
<StatCard icon={Shield} label="Structure" value={viewData.info.structure} />
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Roster Preview */}
|
||||
<Stack gap={4}>
|
||||
<Box display="flex" justifyContent="between" alignItems="center">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Roster Preview</Text>
|
||||
<Link href={`/leagues/${viewData.leagueId}/roster`}>
|
||||
<Text size="xs" color="text-blue-500" weight="bold" uppercase>View All</Text>
|
||||
</Link>
|
||||
</Box>
|
||||
<Box border borderColor="zinc-800" bg="zinc-900/30" overflow="hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<tbody>
|
||||
{viewData.adminSummaries.concat(viewData.stewardSummaries).concat(viewData.memberSummaries).slice(0, 5).map((member) => (
|
||||
<tr key={member.driverId} className="border-b border-zinc-800/50">
|
||||
<td className="px-6 py-3">
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box w="6" h="6" bg="zinc-800" rounded="full" />
|
||||
<Text size="sm" weight="bold" color="text-white">{member.driverName}</Text>
|
||||
</Box>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">
|
||||
<Text size="xs" color="text-zinc-500" uppercase weight="bold">{member.roleBadgeText}</Text>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{viewData.adminSummaries.length === 0 && <Text size="xs" color="text-zinc-600" italic>No admins assigned</Text>}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
{viewData.adminSummaries.length === 0 && viewData.stewardSummaries.length === 0 && viewData.memberSummaries.length === 0 && (
|
||||
<tr>
|
||||
<td className="px-6 py-8 text-center">
|
||||
<Text size="sm" color="text-zinc-600" italic>No members to display</Text>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Sponsors</Text>
|
||||
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
|
||||
<Stack gap={4}>
|
||||
{viewData.sponsors.length > 0 ? (
|
||||
viewData.sponsors.map(sponsor => (
|
||||
<Box key={sponsor.id} display="flex" alignItems="center" gap={3}>
|
||||
<Box w="8" h="8" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-blue-500">
|
||||
<Trophy size={16} />
|
||||
{/* Sidebar */}
|
||||
<Box as="aside">
|
||||
<Stack gap={8}>
|
||||
<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">
|
||||
<Stack gap={4}>
|
||||
{viewData.ownerSummary && (
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box w="10" h="10" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-zinc-500">
|
||||
<Users size={20} />
|
||||
</Box>
|
||||
<Text size="sm" weight="bold" color="text-zinc-300">{sponsor.name}</Text>
|
||||
<Stack gap={0}>
|
||||
<Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Owner</Text>
|
||||
<Text size="sm" weight="bold" color="text-white">{viewData.ownerSummary.driverName}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
))
|
||||
) : (
|
||||
<Text size="xs" color="text-zinc-600" italic>No active sponsors</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
<Stack gap={2}>
|
||||
<Text size="xs" color="text-zinc-500" weight="bold" uppercase letterSpacing="0.05em">Admins</Text>
|
||||
<Box display="flex" flexWrap="wrap" gap={2}>
|
||||
{viewData.adminSummaries.map(admin => (
|
||||
<Box key={admin.driverId} px={2} py={1} bg="zinc-800" color="text-zinc-400" border borderColor="zinc-700">
|
||||
<Text size="xs" weight="bold" uppercase fontSize="10px">{admin.driverName}</Text>
|
||||
</Box>
|
||||
))}
|
||||
{viewData.adminSummaries.length === 0 && <Text size="xs" color="text-zinc-600" italic>No admins assigned</Text>}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Sponsors</Text>
|
||||
<Box p={6} border borderColor="zinc-800" bg="zinc-900/30">
|
||||
<Stack gap={4}>
|
||||
{viewData.sponsors.length > 0 ? (
|
||||
viewData.sponsors.map(sponsor => (
|
||||
<Box key={sponsor.id} display="flex" alignItems="center" gap={3}>
|
||||
<Box w="8" h="8" bg="zinc-800" border borderColor="zinc-700" display="flex" alignItems="center" justifyContent="center" color="text-blue-500">
|
||||
<Trophy size={16} />
|
||||
</Box>
|
||||
<Text size="sm" weight="bold" color="text-zinc-300">{sponsor.name}</Text>
|
||||
</Box>
|
||||
))
|
||||
) : (
|
||||
<Text size="xs" color="text-zinc-600" italic>No active sponsors</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -107,4 +162,4 @@ function StatCard({ icon: Icon, label, value }: { icon: LucideIcon, label: strin
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -16,7 +16,8 @@ export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps
|
||||
trackName: race.track || 'TBA',
|
||||
date: race.scheduledAt,
|
||||
time: new Date(race.scheduledAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
|
||||
status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming'
|
||||
status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming',
|
||||
strengthOfField: race.strengthOfField
|
||||
}));
|
||||
|
||||
return (
|
||||
|
||||
@@ -32,8 +32,10 @@ export function LeagueStandingsTemplate({
|
||||
position: entry.position,
|
||||
driverName: driver?.name || 'Unknown Driver',
|
||||
points: entry.totalPoints,
|
||||
wins: 0,
|
||||
podiums: 0,
|
||||
wins: 0, // Placeholder
|
||||
podiums: 0, // Placeholder
|
||||
races: entry.racesStarted,
|
||||
avgFinish: entry.avgFinish,
|
||||
gap: entry.position === 1 ? '—' : `-${viewData.standings[0].totalPoints - entry.totalPoints}`
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user