Breadcrumb

1import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-solid";2import { cn } from "@/lib/utils";3import { sprawlify } from "@sprawlify/solid";4import { splitProps, type ComponentProps } from "solid-js";56function Breadcrumb(props: 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(props: ComponentProps<typeof sprawlify.ol>) {19  const [local, others] = splitProps(props, ["class"]);2021  return (22    <sprawlify.ol23      data-scope="breadcrumb"24      data-part="list"25      data-slot="breadcrumb-list"26      class={cn(27        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",28        local.class,29      )}30      {...others}31    />32  );33}3435function BreadcrumbItem(props: ComponentProps<typeof sprawlify.li>) {36  const [local, others] = splitProps(props, ["class"]);3738  return (39    <sprawlify.li40      data-scope="breadcrumb"41      data-part="item"42      data-slot="breadcrumb-item"43      class={cn("inline-flex items-center gap-1.5", local.class)}44      {...others}45    />46  );47}4849function BreadcrumbLink(props: ComponentProps<typeof sprawlify.a>) {50  const [local, others] = splitProps(props, ["class"]);5152  return (53    <sprawlify.a54      data-scope="breadcrumb"55      data-part="link"56      data-slot="breadcrumb-link"57      class={cn("transition-colors hover:text-foreground", local.class)}58      {...others}59    />60  );61}6263function BreadcrumbPage(props: ComponentProps<typeof sprawlify.span>) {64  const [local, others] = splitProps(props, ["class"]);6566  return (67    <sprawlify.span68      data-scope="breadcrumb"69      data-part="page"70      data-slot="breadcrumb-page"71      role="link"72      aria-disabled="true"73      aria-current="page"74      class={cn("font-normal text-foreground", local.class)}75      {...others}76    />77  );78}7980function BreadcrumbSeparator(props: ComponentProps<typeof sprawlify.li>) {81  const [local, others] = splitProps(props, ["class", "children"]);8283  return (84    <sprawlify.li85      data-scope="breadcrumb"86      data-part="separator"87      data-slot="breadcrumb-separator"88      role="presentation"89      aria-hidden="true"90      class={cn("[&>svg]:size-3.5", local.class)}91      {...others}92    >93      {local.children ?? <ChevronRightIcon />}94    </sprawlify.li>95  );96}9798function BreadcrumbEllipsis(props: ComponentProps<typeof sprawlify.span>) {99  const [local, others] = splitProps(props, ["class"]);100101  return (102    <sprawlify.span103      data-scope="breadcrumb"104      data-part="ellipsis"105      data-slot="breadcrumb-ellipsis"106      role="presentation"107      aria-hidden="true"108      class={cn("flex size-9 items-center justify-center", local.class)}109      {...others}110    >111      <MoreHorizontalIcon class="size-4" />112      <span class="sr-only">More</span>113    </sprawlify.span>114  );115}116117export {118  Breadcrumb,119  BreadcrumbList,120  BreadcrumbItem,121  BreadcrumbLink,122  BreadcrumbPage,123  BreadcrumbSeparator,124  BreadcrumbEllipsis,125};126