58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { Link } from '@/ui/Link';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
|
|
interface Tab {
|
|
label: string;
|
|
href: string;
|
|
exact?: boolean;
|
|
}
|
|
|
|
interface LeagueNavTabsProps {
|
|
tabs: Tab[];
|
|
currentPathname: string;
|
|
}
|
|
|
|
export function LeagueNavTabs({ tabs, currentPathname }: LeagueNavTabsProps) {
|
|
return (
|
|
<Stack as="nav" borderBottom borderColor="zinc-800" mb={6}>
|
|
<Stack as="ul" direction="row" gap={8} overflow="auto" hideScrollbar>
|
|
{tabs.map((tab) => {
|
|
const isActive = tab.exact
|
|
? currentPathname === tab.href
|
|
: currentPathname.startsWith(tab.href);
|
|
|
|
return (
|
|
<Stack as="li" key={tab.href} position="relative">
|
|
<Link
|
|
href={tab.href}
|
|
variant="ghost"
|
|
pb={4}
|
|
display="block"
|
|
size="sm"
|
|
weight="medium"
|
|
color={isActive ? 'text-blue-500' : 'text-zinc-400'}
|
|
hoverTextColor={isActive ? 'text-blue-500' : 'text-zinc-200'}
|
|
transition
|
|
>
|
|
{tab.label}
|
|
</Link>
|
|
{isActive && (
|
|
<Stack
|
|
position="absolute"
|
|
bottom="0"
|
|
left="0"
|
|
right="0"
|
|
h="0.5"
|
|
bg="bg-blue-500"
|
|
/>
|
|
)}
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|