Glass Breadcrumb

1import * as React from 'react';
2import { Slot } from 'radix-ui';
3import { ChevronRight, MoreHorizontal } from 'lucide-react';
4 
5import { cn } from '@/lib/utils';
6 
7function GlassBreadcrumb({ ...props }: React.ComponentProps<'nav'>) {
8  return <nav aria-label="breadcrumb" {...props} />;
9}
10 
11function GlassBreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
12  return (
13    <ol
14      className={cn('flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground', className)}
15      {...props}
16    />
17  );
18}
19 
20function GlassBreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
21  return <li className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
22}
23 
24interface GlassBreadcrumbLinkProps extends React.ComponentProps<'a'> {
25  asChild?: boolean;
26}
27 
28function GlassBreadcrumbLink({ asChild, className, ...props }: GlassBreadcrumbLinkProps) {
29  const Comp = asChild ? Slot.Root : 'a';
30  return (
31    <Comp
32      className={cn('transition-colors hover:text-ruri dark:hover:text-ruri-soft', className)}
33      {...props}
34    />
35  );
36}
37 
38function GlassBreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
39  return (
40    <span
41      role="link"
42      aria-disabled="true"
43      aria-current="page"
44      className={cn('text-foreground', className)}
45      {...props}
46    />
47  );
48}
49 
50function GlassBreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
51  return (
52    <li role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
53      {children ?? <ChevronRight className="text-faint" />}
54    </li>
55  );
56}
57 
58function GlassBreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
59  return (
60    <span
61      className={cn('grid size-9 place-items-center', className)}
62      {...props}
63    >
64      <MoreHorizontal className="size-4 text-faint" />
65      <span className="sr-only">More</span>
66    </span>
67  );
68}
69 
70export {
71  GlassBreadcrumb,
72  GlassBreadcrumbList,
73  GlassBreadcrumbItem,
74  GlassBreadcrumbLink,
75  GlassBreadcrumbPage,
76  GlassBreadcrumbSeparator,
77  GlassBreadcrumbEllipsis,
78};