57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Container } from '@/ui/Container';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Breadcrumbs } from '@/ui/Breadcrumbs';
|
|
import { LeagueTabs } from '@/components/leagues/LeagueTabs';
|
|
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
|
|
|
|
interface Tab {
|
|
label: string;
|
|
href: string;
|
|
exact?: boolean;
|
|
}
|
|
|
|
interface LeagueDetailTemplateProps {
|
|
viewData: LeagueDetailViewData;
|
|
tabs: Tab[];
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function LeagueDetailTemplate({
|
|
viewData,
|
|
tabs,
|
|
children,
|
|
}: LeagueDetailTemplateProps) {
|
|
return (
|
|
<Container size="lg" py={6}>
|
|
<Stack gap={6}>
|
|
<Breadcrumbs
|
|
items={[
|
|
{ label: 'Home', href: '/' },
|
|
{ label: 'Leagues', href: '/leagues' },
|
|
{ label: viewData.name },
|
|
]}
|
|
/>
|
|
|
|
<Box>
|
|
<Heading level={1}>{viewData.name}</Heading>
|
|
<Text color="text-gray-400" block mt={2}>
|
|
{viewData.description}
|
|
</Text>
|
|
</Box>
|
|
|
|
<LeagueTabs tabs={tabs} />
|
|
|
|
<Box>
|
|
{children}
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|