72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { cn } from '@kit/ui/utils';
|
|
|
|
interface FischereiTabNavigationProps {
|
|
account: string;
|
|
activeTab: string;
|
|
}
|
|
|
|
const TABS = [
|
|
{ id: 'overview', i18nKey: 'fischerei:nav.overview', path: '' },
|
|
{ id: 'waters', i18nKey: 'fischerei:nav.waters', path: '/waters' },
|
|
{ id: 'species', i18nKey: 'fischerei:nav.species', path: '/species' },
|
|
{ id: 'stocking', i18nKey: 'fischerei:nav.stocking', path: '/stocking' },
|
|
{ id: 'leases', i18nKey: 'fischerei:nav.leases', path: '/leases' },
|
|
{
|
|
id: 'catch-books',
|
|
i18nKey: 'fischerei:nav.catchBooks',
|
|
path: '/catch-books',
|
|
},
|
|
{ id: 'permits', i18nKey: 'fischerei:nav.permits', path: '/permits' },
|
|
{
|
|
id: 'competitions',
|
|
i18nKey: 'fischerei:nav.competitions',
|
|
path: '/competitions',
|
|
},
|
|
{
|
|
id: 'statistics',
|
|
i18nKey: 'fischerei:nav.statistics',
|
|
path: '/statistics',
|
|
},
|
|
] as const;
|
|
|
|
export function FischereiTabNavigation({
|
|
account,
|
|
activeTab,
|
|
}: FischereiTabNavigationProps) {
|
|
const basePath = `/home/${account}/fischerei`;
|
|
|
|
return (
|
|
<div className="mb-6 border-b">
|
|
<nav
|
|
className="-mb-px flex space-x-1 overflow-x-auto"
|
|
aria-label="Fisheries Navigation"
|
|
>
|
|
{TABS.map((tab) => {
|
|
const isActive = tab.id === activeTab;
|
|
|
|
return (
|
|
<Link
|
|
key={tab.id}
|
|
href={`${basePath}${tab.path}`}
|
|
data-test={`fischerei-tab-${tab.id}`}
|
|
className={cn(
|
|
'border-b-2 px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
|
|
isActive
|
|
? 'border-primary text-primary'
|
|
: 'text-muted-foreground hover:border-muted-foreground/30 hover:text-foreground border-transparent',
|
|
)}
|
|
>
|
|
<Trans i18nKey={tab.i18nKey} />
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|