74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
'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';
|
|
import { Box } from '@/ui/Box';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Container } from '@/ui/Container';
|
|
import { Icon } from '@/ui/Icon';
|
|
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}>
|
|
<Stack gap={8}>
|
|
<Box>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Link href={routes.public.leagues}>
|
|
<Text size="sm" color="text-gray-400">Leagues</Text>
|
|
</Link>
|
|
<Icon icon={ChevronRight} size={3} color="text-gray-500" />
|
|
<Text size="sm" color="text-white">{viewData.name}</Text>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* 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>
|
|
);
|
|
}
|