Breadcrumb

1import { ChevronRight, MoreHorizontal } from "lucide-solid";
2import type { Component, JSX } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6const Breadcrumb: Component<JSX.HTMLAttributes<HTMLElement> & { separator?: JSX.Element }> = (
7  props,
8) => {
9  const [local, rest] = splitProps(props, ["class", "separator"]);
10  return <nav aria-label="breadcrumb" class={local.class} {...rest} />;
11};
12 
13const BreadcrumbList: Component<JSX.HTMLAttributes<HTMLOListElement>> = (props) => {
14  const [local, rest] = splitProps(props, ["class"]);
15  return (
16    <ol
17      class={cn(
18        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
19        local.class,
20      )}
21      {...rest}
22    />
23  );
24};
25 
26const BreadcrumbItem: Component<JSX.HTMLAttributes<HTMLLIElement>> = (props) => {
27  const [local, rest] = splitProps(props, ["class"]);
28  return <li class={cn("inline-flex items-center gap-1.5", local.class)} {...rest} />;
29};
30 
31const BreadcrumbLink: Component<
32  JSX.AnchorHTMLAttributes<HTMLAnchorElement> & { asChild?: boolean }
33> = (props) => {
34  const [local, rest] = splitProps(props, ["class"]);
35  return <a class={cn("transition-colors hover:text-foreground", local.class)} {...rest} />;
36};
37 
38const BreadcrumbPage: Component<JSX.HTMLAttributes<HTMLSpanElement>> = (props) => {
39  const [local, rest] = splitProps(props, ["class"]);
40  return (
41    <span
42      aria-disabled="true"
43      aria-current="page"
44      class={cn("font-normal text-foreground", local.class)}
45      {...rest}
46    />
47  );
48};
49 
50const BreadcrumbSeparator: Component<JSX.HTMLAttributes<HTMLLIElement>> = (props) => {
51  const [local, rest] = splitProps(props, ["class", "children"]);
52  return (
53    <li
54      role="presentation"
55      aria-hidden="true"
56      class={cn("[&>svg]:size-3.5", local.class)}
57      {...rest}
58    >
59      {local.children ?? <ChevronRight />}
60    </li>
61  );
62};
63 
64const BreadcrumbEllipsis: Component<JSX.HTMLAttributes<HTMLSpanElement>> = (props) => {
65  const [local, rest] = splitProps(props, ["class"]);
66  return (
67    <span
68      role="presentation"
69      aria-hidden="true"
70      class={cn("flex h-9 w-9 items-center justify-center", local.class)}
71      {...rest}
72    >
73      <MoreHorizontal class="h-4 w-4" />
74      <span class="sr-only">More</span>
75    </span>
76  );
77};
78 
79export {
80  Breadcrumb,
81  BreadcrumbList,
82  BreadcrumbItem,
83  BreadcrumbLink,
84  BreadcrumbPage,
85  BreadcrumbSeparator,
86  BreadcrumbEllipsis,
87};