@baseplate-dev/ui-components
Version:
Shared UI component library
14 lines • 1.38 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
import { cn } from '#src/utils/index.js';
/**
* A tab-like interface that allows the user to navigate between different sections via links
*/
function NavigationTabs({ className, children, ...props }) {
return (_jsx(NavigationMenuPrimitive.Root, { ...props, asChild: true, orientation: "horizontal", children: _jsx(NavigationMenuPrimitive.List, { className: cn('inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground', className), children: children }) }));
}
function NavigationTabsItem({ className, children, asChild, ...props }) {
return (_jsx(NavigationMenuPrimitive.Item, { className: cn('flex-1', className), children: _jsx(NavigationMenuPrimitive.Link, { className: "inline-flex w-full items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm", asChild: asChild, ...props, children: children }) }));
}
export { NavigationTabs, NavigationTabsItem };
//# sourceMappingURL=navigation-tabs.js.map