Handmade shadcn/ui Breadcrumb

breadcrumbs.tsx

import * as React from "react";
import { ChevronRightIcon } from "@radix-ui/react-icons";

interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLAnchorElement> {
  href: string;
}

const Breadcrumb = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => {
  const items = React.Children.toArray(children);

  return (
    <div
      ref={ref}
      className={`flex items-center space-x-2 text-sm ${className}`}
      {...props}
    >
      {items.map((item, index) => (
        <React.Fragment key={index}>
          {item}
          {index < items.length - 1 && (
            <ChevronRightIcon className="w-4 h-4 text-foreground" />
          )}
        </React.Fragment>
      ))}
    </div>
  );
});
Breadcrumb.displayName = "Breadcrumb";

const BreadcrumbItem = React.forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(
  ({ className, href, children, ...props }, ref) => (
    <a
      ref={ref}
      href={href}
      className={`text-gray-500 hover:text-gray-700 ${className}`}
      {...props}
    >
      {children}
    </a>
  )
);
BreadcrumbItem.displayName = "BreadcrumbItem";

export { Breadcrumb, BreadcrumbItem };