breadcrumb

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import { Polymorphic } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconChevronRight from "~icons/lucide/chevron-right";
6import IconEllipsis from "~icons/lucide/ellipsis";
7 
8import type { Component, ComponentProps, ValidComponent } from "solid-js";
9import { children, Show, splitProps } from "solid-js";
10 
11const Breadcrumb: Component<ComponentProps<"nav">> = (props) => {
12  const [local, others] = splitProps(props, ["class"]);
13  return (
14    <nav
15      aria-label="breadcrumb"
16      data-slot="breadcrumb"
17      class={cn(local.class)}
18      {...others}
19    />
20  );
21};
22 
23const BreadcrumbList: Component<ComponentProps<"ol">> = (props) => {
24  const [local, others] = splitProps(props, ["class"]);
25  return (
26    <ol
27      data-slot="breadcrumb-list"
28      class={cn(
29        "text-muted-foreground gap-1.5 text-sm wrap-break-word flex flex-wrap items-center",
30        local.class,
31      )}
32      {...others}
33    />
34  );
35};
36 
37const BreadcrumbItem: Component<ComponentProps<"li">> = (props) => {
38  const [local, others] = splitProps(props, ["class"]);
39  return (
40    <li
41      data-slot="breadcrumb-item"
42      class={cn("gap-1 inline-flex items-center", local.class)}
43      {...others}
44    />
45  );
46};
47 
48type BreadcrumbLinkProps<T extends ValidComponent = "a"> =
49  & ComponentProps<"a">
50  & { class?: string | undefined };
51 
52const BreadcrumbLink = <T extends ValidComponent = "a">(
53  props: PolymorphicProps<T, BreadcrumbLinkProps<T>>,
54) => {
55  const [local, others] = splitProps(props as BreadcrumbLinkProps, ["class"]);
56  return (
57    <Polymorphic
58      as="a"
59      data-slot="breadcrumb-link"
60      class={cn("hover:text-foreground transition-colors", local.class)}
61      {...others}
62    />
63  );
64};
65 
66const BreadcrumbPage: Component<ComponentProps<"span">> = (props) => {
67  const [local, others] = splitProps(props, ["class"]);
68  return (
69    <span
70      data-slot="breadcrumb-page"
71      role="link"
72      aria-disabled="true"
73      aria-current="page"
74      class={cn("text-foreground font-normal", local.class)}
75      {...others}
76    />
77  );
78};
79 
80const BreadcrumbSeparator: Component<ComponentProps<"li">> = (props) => {
81  const [local, others] = splitProps(props, ["class", "children"]);
82 
83  // prevents rendering children twice
84  const resolvedChildren = children(() => local.children);
85  const hasChildren = () => resolvedChildren.toArray().length !== 0;
86 
87  return (
88    <li
89// … truncated