From 576a59353f8440ebe68bc610c89bdacd8d298305 Mon Sep 17 00:00:00 2001
From: lars-berger <lars.berger@yahoo.com>
Date: Mon, 17 Feb 2025 22:28:43 +0800
Subject: [PATCH] feat: add `Breadcrumbs` component

---
 src/components/breadcrumb.tsx | 54 +++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx
index b035e80..a34c0d9 100644
--- a/src/components/breadcrumb.tsx
+++ b/src/components/breadcrumb.tsx
@@ -1,6 +1,9 @@
 import {
+  For,
+  Show,
   splitProps,
   type ComponentProps,
+  type JSXElement,
   type ParentComponent,
 } from 'solid-js';
 import { IconChevronRight, IconDots } from '@tabler/icons-solidjs';
@@ -111,3 +114,54 @@ export const BreadcrumbEllipsis: ParentComponent<
     </span>
   );
 };
+
+export type BreadcrumbEntry = {
+  /**
+   * Content to display (string or JSX).
+   **/
+  content: JSXElement;
+
+  /**
+   * Href for navigation.
+   **/
+  href: string;
+};
+
+export interface BreadcrumbsProps {
+  /**
+   * Array of items to display in the breadcrumb.
+   **/
+  entries: BreadcrumbEntry[];
+}
+
+export function Breadcrumbs(props: BreadcrumbsProps) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <For each={props.entries}>
+          {(entry, index) => (
+            <>
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  href={entry.href}
+                  onClick={e => {
+                    // Skip navigation if the current entry is the last one.
+                    if (index() === props.entries.length - 1) {
+                      e.preventDefault();
+                    }
+                  }}
+                >
+                  {entry.content}
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+
+              <Show when={index() !== props.entries.length - 1}>
+                <BreadcrumbSeparator />
+              </Show>
+            </>
+          )}
+        </For>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}