You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import useTranslation from '@/src/hooks/useTranslation';
|
|
|
|
interface FacilityTabNavigationProps {
|
|
facilityId: number;
|
|
}
|
|
|
|
interface TabConfig {
|
|
key: string;
|
|
label: string;
|
|
href: string;
|
|
}
|
|
|
|
export default function FacilityTabNavigation({ facilityId }: FacilityTabNavigationProps) {
|
|
const { locale } = useTranslation();
|
|
const pathname = usePathname();
|
|
|
|
const basePath = `/${locale}/admin/facilities/${facilityId}`;
|
|
|
|
const tabs: TabConfig[] = [
|
|
{ key: 'profile', label: 'Profile', href: basePath },
|
|
{ key: 'courts', label: 'Courts', href: `${basePath}/courts` },
|
|
{ key: 'slot-definitions', label: 'Slot Definitions', href: `${basePath}/slot-definitions` },
|
|
{ key: 'slot-instances', label: 'Slot Instances', href: `${basePath}/slot-instances` },
|
|
{ key: 'plans', label: 'Plans', href: `${basePath}/plans` },
|
|
{ key: 'members', label: 'Members', href: `${basePath}/members` },
|
|
{ key: 'competitions', label: 'Competitions', href: `${basePath}/competitions` },
|
|
{ key: 'settings', label: 'Settings', href: `${basePath}/settings` },
|
|
{ key: 'credits', label: 'Credits', href: `${basePath}/credits` },
|
|
{ key: 'transfers', label: 'Transfers', href: `${basePath}/transfers` },
|
|
];
|
|
|
|
function isActive(tab: TabConfig): boolean {
|
|
// For the base facility path (profile), check if we're exactly on it
|
|
if (tab.key === 'profile') {
|
|
// Active if pathname is exactly the basePath (no sub-routes)
|
|
return pathname === basePath;
|
|
}
|
|
// For sub-pages, check if pathname starts with the tab's href
|
|
return pathname.startsWith(tab.href);
|
|
}
|
|
|
|
return (
|
|
<div className="border-b-2 border-slate-200 mb-8">
|
|
<div className="overflow-x-auto scrollbar-hide -mb-px">
|
|
<div className="flex min-w-max">
|
|
{tabs.map((tab) => {
|
|
const active = isActive(tab);
|
|
return (
|
|
<Link
|
|
key={tab.key}
|
|
href={tab.href}
|
|
className={`px-4 sm:px-6 py-3 font-semibold transition-colors border-b-2 whitespace-nowrap text-sm sm:text-base ${
|
|
active
|
|
? 'border-slate-900 text-slate-900'
|
|
: 'border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|