Function NavLink

apps/baseai.dev/src/components/Navigation.tsx:87–136

({
	href,
	children,
	tag,
	active = false,
	isAnchorLink = false,
	navRef
}: {
	href: string;
	children: React.ReactNode;
	tag?: string;
	active?: boolean;
	isAnchorLink?: boolean;
	navRef?: React.RefObject<HTMLAnchorElement | null>;
})

}

function NavLink({
	href,
	children,
	tag,
	active = false,
	isAnchorLink = false,
	navRef
}: {
	href: string;
	children: React.ReactNode;
	tag?: string;
	active?: boolean;
	isAnchorLink?: boolean;
	navRef?: React.RefObject<HTMLAnchorElement | null>;
}) {
	const number = children?.toString().split('.')[0];
	const hasNumber = isNaN(parseInt(number!)) === false;
	let content = children;

	if (hasNumber) {
		content = children?.toString().split('.').slice(1).join('.');
	}

	return (
		<Link
			href={href}
			aria-current={active ? 'page' : undefined}
			ref={navRef}
			className={clsx(
				'flex scroll-mt-16 items-center gap-2 py-1 pr-3 text-sm transition',
				isAnchorLink ? 'pl-7' : 'pl-4',
				active
					? 'text-zinc-900 dark:text-white'
					: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
			)}
		>
			{hasNumber && (
				<code className="mr-2 flex w-auto justify-end rounded-md bg-muted/60 px-2 opacity-50 ring-2 ring-muted">
					{number}
				</code>
			)}
			<span className="truncate">{content}</span>
			{tag && (
				<Tag variant="small" color="zinc">
					{tag}
				</Tag>
			)}
		</Link>
	);
}

function NavigationGroup({
	group,