Breadcrumb

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { Show, splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core"
5import * as BreadcrumbPrimitive from "@kobalte/core/breadcrumbs"
6 
7import { cn } from "~/lib/utils"
8 
9const Breadcrumb = BreadcrumbPrimitive.Root
10 
11const BreadcrumbList: Component<ComponentProps<"ol">> = (props) => {
12  const [local, others] = splitProps(props, ["class"])
13  return (
14    <ol
15      class={cn(
16        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
17        local.class
18      )}
19      {...others}
20    />
21  )
22}
23 
24const BreadcrumbItem: Component<ComponentProps<"li">> = (props) => {
25  const [local, others] = splitProps(props, ["class"])
26  return <li class={cn("inline-flex items-center gap-1.5", local.class)} {...others} />
27}
28 
29type BreadcrumbLinkProps<T extends ValidComponent = "a"> =
30  BreadcrumbPrimitive.BreadcrumbsLinkProps<T> & { class?: string | undefined }
31 
32const BreadcrumbLink = <T extends ValidComponent = "a">(
33  props: PolymorphicProps<T, BreadcrumbLinkProps<T>>
34) => {
35  const [local, others] = splitProps(props as BreadcrumbLinkProps, ["class"])
36  return (
37    <BreadcrumbPrimitive.Link
38      class={cn(
39        "transition-colors hover:text-foreground data-[current]:font-normal data-[current]:text-foreground",
40        local.class
41      )}
42      {...others}
43    />
44  )
45}
46 
47type BreadcrumbSeparatorProps<T extends ValidComponent = "span"> =
48  BreadcrumbPrimitive.BreadcrumbsSeparatorProps<T> & {
49    class?: string | undefined
50    children?: JSX.Element
51  }
52 
53const BreadcrumbSeparator = <T extends ValidComponent = "span">(
54  props: PolymorphicProps<T, BreadcrumbSeparatorProps<T>>
55) => {
56  const [local, others] = splitProps(props as BreadcrumbSeparatorProps, ["class", "children"])
57  return (
58    <BreadcrumbPrimitive.Separator class={cn("[&>svg]:size-3.5", local.class)} {...others}>
59      <Show
60        when={local.children}
61        fallback={
62          <svg
63            xmlns="http://www.w3.org/2000/svg"
64            viewBox="0 0 24 24"
65            fill="none"
66            stroke="currentColor"
67            stroke-width="2"
68            stroke-linecap="round"
69            stroke-linejoin="round"
70          >
71            <path d="M9 6l6 6l-6 6" />
72          </svg>
73        }
74      >
75        {local.children}
76      </Show>
77    </BreadcrumbPrimitive.Separator>
78  )
79}
80 
81const BreadcrumbEllipsis: Component<ComponentProps<"span">> = (props) => {
82// … truncated