Breadcrumb

1import * as React from "react";
2import { ChevronRight, MoreHorizontal } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5 
6const Breadcrumb = React.forwardRef<
7  HTMLElement,
8  React.ComponentPropsWithoutRef<"nav"> & {
9    separator?: React.ReactNode;
10  }
11>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
12Breadcrumb.displayName = "Breadcrumb";
13 
14const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
15  ({ className, ...props }, ref) => (
16    <ol
17      ref={ref}
18      className={cn(
19        "flex max-w-full flex-nowrap items-center gap-1.5 overflow-x-auto break-words text-sm text-muted-foreground scrollbar-none sm:gap-2.5",
20        "transition-[color,background-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]",
21        className,
22      )}
23      {...props}
24    />
25  ),
26);
27BreadcrumbList.displayName = "BreadcrumbList";
28 
29const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
30  ({ className, ...props }, ref) => (
31    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
32  ),
33);
34BreadcrumbItem.displayName = "BreadcrumbItem";
35 
36const BreadcrumbLink = React.forwardRef<
37  HTMLAnchorElement,
38  React.ComponentPropsWithoutRef<"a"> & {
39    asChild?: boolean;
40  }
41>(({ asChild, className, ...props }, ref) => {
42  const Comp = asChild ? "span" : "a";
43 
44  return (
45    <Comp
46      ref={ref}
47      className={cn(
48        "transition-colors duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] hover:text-foreground",
49        className,
50      )}
51      {...props}
52    />
53  );
54});
55BreadcrumbLink.displayName = "BreadcrumbLink";
56 
57const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
58  ({ className, ...props }, ref) => (
59    <span
60      ref={ref}
61      role="link"
62      aria-disabled="true"
63      aria-current="page"
64      className={cn("font-normal text-foreground animate-poyraz-fade-in", className)}
65      {...props}
66    />
67  ),
68);
69BreadcrumbPage.displayName = "BreadcrumbPage";
70 
71const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
72  <li
73    role="presentation"
74    aria-hidden="true"
75    className={cn(
76// … truncated