From 0dec1e569761db6982e37309488081aad6f57d48 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Tue, 18 Mar 2025 10:36:26 +0800
Subject: [PATCH] feat(navbar): add breadcrumb navigation component

---
 src/components/navbar.tsx | 62 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/navbar.tsx

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..05314c9
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Home } from "lucide-react";
+import { usePathname } from "next/navigation";
+
+export const Navbar = () => {
+  const pathname = usePathname();
+  const pathSegments = pathname.split("/").filter(Boolean); // Filter out empty strings
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList className="rounded-lg border border-border bg-background px-3 py-2 shadow-sm shadow-black/5">
+        {/* If pathname is "/", display the Home icon inside BreadcrumbPage */}
+        {pathSegments.length === 0 ? (
+          <BreadcrumbItem>
+            <BreadcrumbPage>
+              <Home size={16} strokeWidth={2} aria-hidden="true" />
+              <span className="sr-only">Home</span>
+            </BreadcrumbPage>
+          </BreadcrumbItem>
+        ) : (
+          <>
+            {/* Always show Home as the first BreadcrumbLink */}
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">
+                <Home size={16} strokeWidth={2} aria-hidden="true" />
+                <span className="sr-only">Home</span>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+
+            {pathSegments.map((item, index) => (
+              <React.Fragment key={index}>
+                <BreadcrumbItem>
+                  {index === pathSegments.length - 1 ? (
+                    <BreadcrumbPage>{item}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink
+                      href={`/${pathSegments.slice(0, index + 1).join("/")}`}
+                    >
+                      {item}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+                {index !== pathSegments.length - 1 && <BreadcrumbSeparator />}
+              </React.Fragment>
+            ))}
+          </>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};