Breadcrumb

1import * as React from "react";2import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";3import { cn } from "@/lib/utils";4import { sprawlify } from "@sprawlify/react";56function Breadcrumb({ ...props }: React.ComponentProps<typeof sprawlify.nav>) {7  return (8    <sprawlify.nav9      data-scope="breadcrumb"10      data-part="root"11      aria-label="breadcrumb"12      data-slot="breadcrumb"13      {...props}14    />15  );16}1718function BreadcrumbList({ className, ...props }: React.ComponentProps<typeof sprawlify.ol>) {19  return (20    <sprawlify.ol21      data-scope="breadcrumb"22      data-part="list"23      data-slot="breadcrumb-list"24      className={cn(25        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",26        className,27      )}28      {...props}29    />30  );31}3233function BreadcrumbItem({ className, ...props }: React.ComponentProps<typeof sprawlify.li>) {34  return (35    <sprawlify.li36      data-scope="breadcrumb"37      data-part="item"38      data-slot="breadcrumb-item"39      className={cn("inline-flex items-center gap-1.5", className)}40      {...props}41    />42  );43}4445function BreadcrumbLink({46  asChild,47  className,48  ...props49}: React.ComponentProps<typeof sprawlify.a>) {50  return (51    <sprawlify.a52      data-scope="breadcrumb"53      data-part="link"54      data-slot="breadcrumb-link"55      className={cn("transition-colors hover:text-foreground", className)}56      {...props}57    />58  );59}6061function BreadcrumbPage({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {62  return (63    <sprawlify.span64      data-scope="breadcrumb"65      data-part="page"66      data-slot="breadcrumb-page"67      role="link"68      aria-disabled="true"69      aria-current="page"70      className={cn("font-normal text-foreground", className)}71      {...props}72    />73  );74}7576function BreadcrumbSeparator({77  children,78  className,79  ...props80}: React.ComponentProps<typeof sprawlify.li>) {81  return (82    <sprawlify.li83      data-scope="breadcrumb"84      data-part="separator"85      data-slot="breadcrumb-separator"86      role="presentation"87      aria-hidden="true"88      className={cn("[&>svg]:size-3.5", className)}89      {...props}90    >91      {children ?? <ChevronRightIcon />}92    </sprawlify.li>93  );94}9596function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {97  return (98    <sprawlify.span99      data-scope="breadcrumb"100      data-part="ellipsis"101      data-slot="breadcrumb-ellipsis"102      role="presentation"103      aria-hidden="true"104      className={cn("flex size-9 items-center justify-center", className)}105      {...props}106    >107      <MoreHorizontalIcon className="size-4" />108      <span className="sr-only">More</span>109    </sprawlify.span>110  );111}112113export {114  Breadcrumb,115  BreadcrumbList,116  BreadcrumbItem,117  BreadcrumbLink,118  BreadcrumbPage,119  BreadcrumbSeparator,120  BreadcrumbEllipsis,121};122