59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { LeagueHeaderPanel } from '@/components/leagues/LeagueHeaderPanel';
|
|
import { LeagueNavTabs } from '@/components/leagues/LeagueNavTabs';
|
|
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
|
|
import { Link } from '@/ui/Link';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
import React from 'react';
|
|
|
|
interface Tab {
|
|
label: string;
|
|
href: string;
|
|
exact?: boolean;
|
|
}
|
|
|
|
interface LeagueDetailTemplateProps {
|
|
viewData: LeagueDetailViewData;
|
|
tabs: Tab[];
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function LeagueDetailTemplate({
|
|
viewData,
|
|
tabs,
|
|
children,
|
|
}: LeagueDetailTemplateProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<Box minHeight="screen" bg="zinc-950" color="text-zinc-200">
|
|
<Box maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={8}>
|
|
{/* Breadcrumbs */}
|
|
<Box as="nav" display="flex" alignItems="center" gap={2} mb={8}>
|
|
<Link href="/" variant="ghost" size="xs" weight="medium">
|
|
<Text size="xs" weight="medium" uppercase letterSpacing="widest">Home</Text>
|
|
</Link>
|
|
<Box color="text-zinc-500"><ChevronRight size={12} /></Box>
|
|
<Link href="/leagues" variant="ghost" size="xs" weight="medium">
|
|
<Text size="xs" weight="medium" uppercase letterSpacing="widest">Leagues</Text>
|
|
</Link>
|
|
<Box color="text-zinc-500"><ChevronRight size={12} /></Box>
|
|
<Text size="xs" weight="medium" color="text-zinc-300" uppercase letterSpacing="widest">{viewData.name}</Text>
|
|
</Box>
|
|
|
|
<LeagueHeaderPanel viewData={viewData} />
|
|
|
|
<LeagueNavTabs tabs={tabs} currentPathname={pathname} />
|
|
|
|
<Box as="main">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|