breadcrumb.tsx raw

   1  import * as React from "react";
   2  import { ChevronRight, MoreHorizontal } from "lucide-react";
   3  import { Slot } from "radix-ui";
   4  
   5  import { cn } from "src/lib/utils";
   6  
   7  function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
   8    return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
   9  }
  10  
  11  function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  12    return (
  13      <ol
  14        data-slot="breadcrumb-list"
  15        className={cn(
  16          "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
  17          className
  18        )}
  19        {...props}
  20      />
  21    );
  22  }
  23  
  24  function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  25    return (
  26      <li
  27        data-slot="breadcrumb-item"
  28        className={cn("inline-flex items-center gap-1.5", className)}
  29        {...props}
  30      />
  31    );
  32  }
  33  
  34  function BreadcrumbLink({
  35    asChild,
  36    className,
  37    ...props
  38  }: React.ComponentProps<"a"> & {
  39    asChild?: boolean;
  40  }) {
  41    const Comp = asChild ? Slot.Root : "a";
  42  
  43    return (
  44      <Comp
  45        data-slot="breadcrumb-link"
  46        className={cn("transition-colors hover:text-foreground", className)}
  47        {...props}
  48      />
  49    );
  50  }
  51  
  52  function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  53    return (
  54      <span
  55        data-slot="breadcrumb-page"
  56        role="link"
  57        aria-disabled="true"
  58        aria-current="page"
  59        className={cn("font-normal text-foreground", className)}
  60        {...props}
  61      />
  62    );
  63  }
  64  
  65  function BreadcrumbSeparator({
  66    children,
  67    className,
  68    ...props
  69  }: React.ComponentProps<"li">) {
  70    return (
  71      <li
  72        data-slot="breadcrumb-separator"
  73        role="presentation"
  74        aria-hidden="true"
  75        className={cn("[&>svg]:size-3.5", className)}
  76        {...props}
  77      >
  78        {children ?? <ChevronRight />}
  79      </li>
  80    );
  81  }
  82  
  83  function BreadcrumbEllipsis({
  84    className,
  85    ...props
  86  }: React.ComponentProps<"span">) {
  87    return (
  88      <span
  89        data-slot="breadcrumb-ellipsis"
  90        role="presentation"
  91        aria-hidden="true"
  92        className={cn("flex size-9 items-center justify-center", className)}
  93        {...props}
  94      >
  95        <MoreHorizontal className="size-4" />
  96        <span className="sr-only">More</span>
  97      </span>
  98    );
  99  }
 100  
 101  export {
 102    Breadcrumb,
 103    BreadcrumbList,
 104    BreadcrumbItem,
 105    BreadcrumbLink,
 106    BreadcrumbPage,
 107    BreadcrumbSeparator,
 108    BreadcrumbEllipsis,
 109  };
 110