68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import SiteGrid from '@/components/SiteGrid';
|
|
import {
|
|
PATH_ADMIN_CONFIGURATION,
|
|
checkPathPrefix,
|
|
isPathAdminConfiguration,
|
|
} from '@/site/paths';
|
|
import { clsx } from 'clsx/lite';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { BiCog } from 'react-icons/bi';
|
|
|
|
export default function AdminNavClient({
|
|
items,
|
|
}: {
|
|
items: {
|
|
label: string,
|
|
href: string,
|
|
count: number,
|
|
}[]
|
|
}) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<SiteGrid
|
|
contentMain={
|
|
<div className={clsx(
|
|
'flex gap-2 md:gap-4',
|
|
'border-b border-gray-200 dark:border-gray-800 pb-3',
|
|
)}>
|
|
<div className={clsx(
|
|
'flex gap-2 md:gap-4',
|
|
'flex-grow overflow-x-auto',
|
|
)}>
|
|
{items.map(({ label, href, count }) =>
|
|
<Link
|
|
key={label}
|
|
href={href}
|
|
className={clsx(
|
|
'flex gap-0.5',
|
|
checkPathPrefix(pathname, href) ? 'font-bold' : 'text-dim',
|
|
)}
|
|
prefetch={false}
|
|
>
|
|
<span>{label}</span>
|
|
{count > 0 &&
|
|
<span>({count})</span>}
|
|
</Link>)}
|
|
</div>
|
|
<Link
|
|
href={PATH_ADMIN_CONFIGURATION}
|
|
className={isPathAdminConfiguration(pathname)
|
|
? 'font-bold'
|
|
: 'text-dim'}
|
|
>
|
|
<BiCog
|
|
size={18}
|
|
className="inline-block"
|
|
aria-label="App Configuration"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
}
|