68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import { Section } from '@/ui/Section';
|
|
import { Layout } from '@/ui/Layout';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
|
|
|
interface Tab {
|
|
label: string;
|
|
href: string;
|
|
exact?: boolean;
|
|
}
|
|
|
|
interface LeagueDetailTemplateProps {
|
|
leagueId: string;
|
|
leagueName: string;
|
|
leagueDescription: string;
|
|
tabs: Tab[];
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function LeagueDetailTemplate({
|
|
leagueId,
|
|
leagueName,
|
|
leagueDescription,
|
|
tabs,
|
|
children,
|
|
}: LeagueDetailTemplateProps) {
|
|
return (
|
|
<Layout>
|
|
<Section>
|
|
<Breadcrumbs
|
|
items={[
|
|
{ label: 'Home', href: '/' },
|
|
{ label: 'Leagues', href: '/leagues' },
|
|
{ label: leagueName },
|
|
]}
|
|
/>
|
|
|
|
<Section>
|
|
<Text size="3xl" weight="bold" className="text-white">
|
|
{leagueName}
|
|
</Text>
|
|
<Text size="base" className="text-gray-400 mt-2">
|
|
{leagueDescription}
|
|
</Text>
|
|
</Section>
|
|
|
|
<Section>
|
|
<div className="flex gap-6 overflow-x-auto">
|
|
{tabs.map((tab) => (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className="pb-3 px-1 font-medium whitespace-nowrap transition-colors text-gray-400 hover:text-white"
|
|
>
|
|
{tab.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
|
|
<Section>
|
|
{children}
|
|
</Section>
|
|
</Section>
|
|
</Layout>
|
|
);
|
|
} |