import type { ComponentPropsWithRef, ReactNode } from "react";
import { Toolbar } from "@base-ui/react/toolbar";
import { cn } from "../../lib/utils";
import { Badge } from "../../ui/badge";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
import { useLayoutNavOptional } from "../layout/layout";
/**
* Renders an anchor by default. Pass a router link through `render` (e.g. `render={}`)
* to navigate client-side; a router that sets `data-status="active"` styles the link as current.
*/
type Props = ComponentPropsWithRef & {
icon?: ReactNode;
hover?: boolean;
/** Show a notification badge on the icon */
badge?: boolean;
/** Keyboard shortcut hint displayed when nav is expanded */
shortcut?: string;
/** Marks the link as the current page. */
active?: boolean;
};
/** A single navigation link in the sidebar. Collapses text automatically when the parent Nav is minimized via CSS. */
function NavListLink(
{
icon,
hover,
badge = false,
shortcut,
className,
ref,
children,
active,
...props
}: Props,
) {
let nav = useLayoutNavOptional();
// Tooltip is only useful when the label is hidden — i.e. the nav is collapsed.
// Without a Layout (e.g. standalone stories), label visibility is decided by
// container width alone, so suppress the tooltip there too.
let collapsed = nav?.open === false;
return (
}
>
{icon}
{children && (
{children}
)}
{shortcut && (
{shortcut}
)}
{children}
);
}
export { NavListLink };