sendou.ink/app/components/SubNav.tsx

import clsx from "clsx";
import type * as React from "react";
import type { LinkProps } from "react-router";
import { NavLink } from "react-router";

export function SubNav({
	children,
	secondary,
}: {
	children: React.ReactNode;
	secondary?: boolean;
}) {
	return (
		<div>
			<nav
				className={clsx("sub-nav__container", {
					"sub-nav__container__secondary": secondary,
				})}
			>
				{children}
			</nav>
		</div>
	);
}

export function SubNavLink({
	children,
	className,
	end = true,
	secondary = false,
	controlled = false,
	active = false,
	...props
}: LinkProps & {
	end?: boolean;
	children: React.ReactNode;
	secondary?: boolean;
	controlled?: boolean;
	active?: boolean;
}) {
	return (
		<NavLink
			className={(state) =>
				clsx("sub-nav__link__container", {
					active: controlled ? active : state.isActive,
					pending: state.isPending,
				})
			}
			end={end}
			{...props}
		>
			<div
				className={clsx("sub-nav__link", className, {
					"sub-nav__link__secondary": secondary,
				})}
			>
				{children}
			</div>
			<div
				className={clsx("sub-nav__border-guy", {
					"sub-nav__border-guy__secondary": secondary,
				})}
			/>
		</NavLink>
	);
}