import { mergeProps } from '@base-ui/react/merge-props';
import { useRender } from '@base-ui/react/use-render';
import {
IconChevronRight as ChevronRightIcon,
IconDots as MoreHorizontalIcon,
} from '@tabler/icons-react';
import type * as React from 'react';
import { cn } from '@/lib/utils';
function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
return (
);
}
function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
return (
);
}
function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
return (
);
}
function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {
return useRender({
defaultTagName: 'a',
props: mergeProps<'a'>(
{
className: cn('hover:text-foreground transition-colors', className),
},
props
),
render,
state: {
slot: 'breadcrumb-link',
},
});
}
function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
return (
);
}
function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
return (
svg]:size-3.5', className)}
{...props}
>
{children ?? }
);
}
function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
return (
svg]:size-4 flex items-center justify-center', className)}
{...props}
>
More
);
}
export {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
};