Breadcrumb

1"use client";
2 
3import "./breadcrumb.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { BreadcrumbContext, useBreadcrumbContext } from "./breadcrumb.context";
8import { breadcrumbVariants, type BreadcrumbVariants } from "./breadcrumb.variants";
9 
10export type BreadcrumbProps = BreadcrumbVariants & React.ComponentProps<"nav">;
11 
12export const BreadcrumbRoot = ({ children, className, ...props }: BreadcrumbProps) => {
13  const slots = breadcrumbVariants();
14 
15  return (
16    <BreadcrumbContext.Provider value={{ slots }}>
17      <nav aria-label="breadcrumb" className={cn(slots.root(), className)} {...props}>
18        {children}
19      </nav>
20    </BreadcrumbContext.Provider>
21  );
22};
23 
24export type BreadcrumbListProps = React.ComponentProps<"ol">;
25 
26export const BreadcrumbList = ({ className, ...props }: BreadcrumbListProps) => {
27  const { slots } = useBreadcrumbContext();
28  return <ol className={cn(slots.list(), className)} {...props} />;
29};
30 
31export type BreadcrumbItemProps = React.ComponentProps<"li">;
32 
33export const BreadcrumbItem = ({ className, ...props }: BreadcrumbItemProps) => {
34  const { slots } = useBreadcrumbContext();
35  return <li className={cn(slots.item(), className)} {...props} />;
36};
37 
38export type BreadcrumbLinkProps = React.ComponentProps<"a">;
39 
40export const BreadcrumbLink = ({ className, ...props }: BreadcrumbLinkProps) => {
41  const { slots } = useBreadcrumbContext();
42  return <a className={cn(slots.link(), className)} {...props} />;
43};
44 
45export type BreadcrumbPageProps = React.ComponentProps<"span">;
46 
47export const BreadcrumbPage = ({ className, ...props }: BreadcrumbPageProps) => {
48  const { slots } = useBreadcrumbContext();
49  return (
50    <span
51      role="link"
52      aria-disabled="true"
53      aria-current="page"
54      className={cn(slots.page(), className)}
55      {...props}
56    />
57  );
58};
59 
60export type BreadcrumbSeparatorProps = React.ComponentProps<"li">;
61 
62export const BreadcrumbSeparator = ({
63  children,
64  className,
65  ...props
66}: BreadcrumbSeparatorProps) => {
67  const { slots } = useBreadcrumbContext();
68  return (
69    <li
70      role="presentation"
71      aria-hidden="true"
72      className={cn(slots.separator(), className)}
73      {...props}
74    >
75      {children ?? "/"}
76    </li>
77  );
78};
79 
80export type BreadcrumbEllipsisProps = React.ComponentProps<"span">;
81 
82export const BreadcrumbEllipsis = ({ className, ...props }: BreadcrumbEllipsisProps) => {
83  const { slots } = useBreadcrumbContext();
84  return (
85    <span
86// … truncated