Breadcrumb

1
import type { PolymorphicProps } from "@kobalte/core";
2
import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
3

4
import { mergeProps, splitProps } from "solid-js";
5
import * as BreadcrumbPrimitive from "@kobalte/core/breadcrumbs";
6
import ChevronRightIcon from "lucide-solid/icons/chevron-right";
7
import MoreHorizontalIcon from "lucide-solid/icons/more-horizontal";
8

9
import { cn } from "~/lib/utils";
10

11
// const Breadcrumb = BreadcrumbPrimitive.Root;
12
type BreadcrumbProps<T extends ValidComponent = "nav"> =
13
  BreadcrumbPrimitive.BreadcrumbsRootProps<T>;
14

15
const Breadcrumb = <T extends ValidComponent = "nav">(
16
  props: PolymorphicProps<T, BreadcrumbProps<T>>,
17
) => {
18
  const merged = mergeProps(
19
    {
20
      separator: () => <ChevronRightIcon />,
21
    },
22
    props,
23
  );
24

25
  return <BreadcrumbPrimitive.Root data-slot="breadcrumb" {...merged} />;
26
};
27

28
const BreadcrumbList: Component<ComponentProps<"ol">> = (props) => {
29
  const [local, others] = splitProps(props, ["class"]);
30
  return (
31
    <ol
32
      data-slot="breadcrumb-list"
33
      class={cn(
34
        "flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
35
        local.class,
36
      )}
37
      {...others}
38
    />
39
  );
40
};
41

42
const BreadcrumbItem: Component<ComponentProps<"li">> = (props) => {
43
  const [local, others] = splitProps(props, ["class"]);
44
  return (
45
    <li
46
      data-slot="breadcrumb-item"
47
      class={cn("inline-flex items-center gap-1.5", local.class)}
48
      {...others}
49
    />
50
  );
51
};
52

53
type BreadcrumbLinkProps<T extends ValidComponent = "a"> =
54
  BreadcrumbPrimitive.BreadcrumbsLinkProps<T> & { class?: string | undefined };
55

56
const BreadcrumbLink = <T extends ValidComponent = "a">(
57
  props: PolymorphicProps<T, BreadcrumbLinkProps<T>>,
58
) => {
59
  const [local, others] = splitProps(props as BreadcrumbLinkProps, ["class"]);
60
  return (
61
    <BreadcrumbPrimitive.Link
62
      data-slot="breadcrumb-link"
63
      class={cn("ui-current:font-bold", local.class)}
64
      {...others}
65
    />
66
  );
67
};
68

69
type BreadcrumbSeparatorProps<T extends ValidComponent = "span"> =
70
  BreadcrumbPrimitive.BreadcrumbsSeparatorProps<T> & {
71
    class?: string | undefined;
72
    children?: JSX.Element;
73
  };
74

75
const BreadcrumbSeparator = <T extends ValidComponent = "span">(
76
  props: PolymorphicProps<T, BreadcrumbSeparatorProps<T>>,
77
) => {
78
  const [local, others] = splitProps(props as BreadcrumbSeparatorProps, [
79
    "class",
80
    "children",
81
  ]);
82
  return (
83
    <BreadcrumbPrimitive.Separator
84
      data-slot="breadcrumb-separator"
85
      class={cn("[&>svg]:size-3.5", local.class)}
86
      {...others}
87
    />
88
  );
89
};
90

91
const BreadcrumbEllipsis: Component<ComponentProps<"span">> = (props) => {
92
  const [local, others] = splitProps(props, ["class"]);
93
  return (
94
    <span
95
      data-slot="breadcrumb-ellipsis"
96
      class={cn("flex size-9 items-center justify-center", local.class)}
97
      {...others}
98
    >
99
      <MoreHorizontalIcon class="size-4" />
100
      <span class="sr-only">More</span>
101
    </span>
102
  );
103
};
104

105
export {
106
  Breadcrumb,
107
  BreadcrumbList,
108
  BreadcrumbItem,
109
  BreadcrumbLink,
110
  BreadcrumbSeparator,
111
  BreadcrumbEllipsis,
112
};