import { ComponentProps } from 'react'; import { Body2, Label1, Label2 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G breadcrumb: links are body-2 in neutral-600, the current page is * label-1 in neutral, separators are neutral-600, and a chevron divider is 6px. */ /** Root navigation container for breadcrumb trails. */ function Breadcrumb({ ...props }: ComponentProps<'nav'>) { return

; } /** Ordered list container for breadcrumb items. */ function BreadcrumbList({ className, ...props }: ComponentProps<'ol'>) { return (

; } /** Link element for navigable breadcrumb items. */ function BreadcrumbLink({ className, children, ...props }: ComponentProps<'a'>) { return ( {children} ); } /** Non-interactive element for the current page in breadcrumb. */ function BreadcrumbPage({ className, children, ...props }: ComponentProps<'p'>) { return ( {children} ); } /** Visual separator between breadcrumb items. */ function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<'li'>) { return (
svg]:size-1.5', className)} {...props} > {children ?? /}