MicroClub Breadcrumb

1import * as React from 'react';
2import { mergeProps } from '@base-ui/react/merge-props';
3import { useRender } from '@base-ui/react/use-render';
4import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
5 
6import { cn } from '@/lib/utils';
7 
8function McBreadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
9  return (
10    <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
11  );
12}
13 
14function McBreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
15  return (
16    <ol
17      data-slot="breadcrumb-list"
18      className={cn(
19        'm-0 list-none border-0 p-0 flex flex-wrap items-center gap-1.5 paragraph-md font-medium text-muted-foreground',
20        className
21      )}
22      {...props}
23    />
24  );
25}
26 
27function McBreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
28  return (
29    <li
30      data-slot="breadcrumb-item"
31      className={cn('inline-flex items-center gap-1', className)}
32      {...props}
33    />
34  );
35}
36 
37function McBreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {
38  return useRender({
39    defaultTagName: 'a',
40    props: mergeProps<'a'>(
41      {
42        className: cn(
43          'no-underline transition-colors text-muted-foreground hover:text-foreground hover:no-underline',
44          className
45        ),
46      },
47      props
48    ),
49    render,
50    state: {
51      slot: 'breadcrumb-link',
52    },
53  });
54}
55 
56function McBreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
57  return (
58    <span
59      data-slot="breadcrumb-page"
60      role="link"
61      aria-disabled="true"
62      aria-current="page"
63      className={cn('font-normal paragraph-md font-medium text-foreground', className)}
64      {...props}
65    />
66  );
67}
68 
69function McBreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
70  return (
71    <li
72      data-slot="breadcrumb-separator"
73      role="presentation"
74      aria-hidden="true"
75      className={cn('text-muted-foreground [&>svg]:size-3.5', className)}
76      {...props}
77    >
78      {children ?? <ChevronRightIcon className="cn-rtl-flip translate-y-px" />}
79    </li>
80  );
81}
82 
83function McBreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
84  return (
85    <span
86      data-slot="breadcrumb-ellipsis"
87      role="presentation"
88      aria-hidden="true"
89      className={cn(
90        'flex size-5 items-center justify-center text-muted-foreground [&>svg]:size-4',
91        className
92// … truncated