import { mergeProps } from '@base-ui/react/merge-props';
import { useRender } from '@base-ui/react/use-render';
import { cn } from '@evershop/evershop/lib/util/cn';
import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
import * as React from 'react';
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,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis
};