Breadcrumb

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4const Breadcrumb = React.forwardRef<
5  HTMLElement,
6  React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode }
7>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
8Breadcrumb.displayName = 'Breadcrumb'
9 
10const BreadcrumbList = React.forwardRef<
11  HTMLOListElement,
12  React.ComponentPropsWithoutRef<'ol'>
13>(({ className, ...props }, ref) => (
14  <ol
15    ref={ref}
16    className={cn(
17      'flex flex-wrap items-center gap-1.5',
18      'font-mono text-xs text-[var(--text-muted)]',
19      'uppercase tracking-wider',
20      className
21    )}
22    {...props}
23  />
24))
25BreadcrumbList.displayName = 'BreadcrumbList'
26 
27const BreadcrumbItem = React.forwardRef<
28  HTMLLIElement,
29  React.ComponentPropsWithoutRef<'li'>
30>(({ className, ...props }, ref) => (
31  <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
32))
33BreadcrumbItem.displayName = 'BreadcrumbItem'
34 
35const BreadcrumbLink = React.forwardRef<
36  HTMLAnchorElement,
37  React.ComponentPropsWithoutRef<'a'>
38>(({ className, ...props }, ref) => (
39  <a
40    ref={ref}
41    className={cn(
42      'text-[var(--text-muted)] hover:text-[var(--color-green)]',
43      'transition-colors duration-150',
44      className
45    )}
46    {...props}
47  />
48))
49BreadcrumbLink.displayName = 'BreadcrumbLink'
50 
51const BreadcrumbPage = React.forwardRef<
52  HTMLSpanElement,
53  React.ComponentPropsWithoutRef<'span'>
54>(({ className, ...props }, ref) => (
55  <span
56    ref={ref}
57    role="link"
58    aria-disabled="true"
59    aria-current="page"
60    className={cn('text-[var(--color-green)]', className)}
61    {...props}
62  />
63))
64BreadcrumbPage.displayName = 'BreadcrumbPage'
65 
66const BreadcrumbSeparator = ({
67  children,
68  className,
69  ...props
70}: React.ComponentProps<'li'>) => (
71  <li
72    role="presentation"
73    aria-hidden="true"
74    className={cn('text-[var(--border-active)]', className)}
75    {...props}
76  >
77    {children ?? '>'}
78  </li>
79)
80BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
81 
82export {
83  Breadcrumb,
84  BreadcrumbList,
85  BreadcrumbItem,
86  BreadcrumbLink,
87  BreadcrumbPage,
88  BreadcrumbSeparator,
89}