From 7fa370a34b176432e4583f2755c951c9cb05c3aa Mon Sep 17 00:00:00 2001
From: Ritk Patel <ritikzoom4ever@gmail.com>
Date: Thu, 2 Oct 2025 23:16:34 +0530
Subject: [PATCH] feat: implement basic breadcrumb navigation component

- Add Breadcrumb component in components/ui/Breadcrumb.tsx
- Accept array of {label, href} items as props
- Render links for all except last item (plain text)
- Use Tailwind classes (flex, gap-2, text-sm)
- Add example usage demonstrations
- Component is reusable across Dashboard, Profile, and other pages

Closes #316
---
 frontend/components/ui/Breadcrumb.example.tsx | 40 +++++++++++++++++
 frontend/components/ui/Breadcrumb.tsx         | 45 +++++++++++++++++++
 frontend/components/ui/index.ts               |  1 +
 3 files changed, 86 insertions(+)
 create mode 100644 frontend/components/ui/Breadcrumb.example.tsx
 create mode 100644 frontend/components/ui/Breadcrumb.tsx
 create mode 100644 frontend/components/ui/index.ts

diff --git a/frontend/components/ui/Breadcrumb.example.tsx b/frontend/components/ui/Breadcrumb.example.tsx
new file mode 100644
index 0000000..1fe976d
--- /dev/null
+++ b/frontend/components/ui/Breadcrumb.example.tsx
@@ -0,0 +1,40 @@
+import Breadcrumb from './Breadcrumb';
+
+// Example usage in a Dashboard page
+export const DashboardBreadcrumb = () => {
+    return (
+        <Breadcrumb
+            items={[
+                { label: 'Home', href: '/' },
+                { label: 'Dashboard' }
+            ]}
+        />
+    );
+};
+
+// Example usage in a Profile page
+export const ProfileBreadcrumb = () => {
+    return (
+        <Breadcrumb
+            items={[
+                { label: 'Home', href: '/' },
+                { label: 'Settings', href: '/settings' },
+                { label: 'Profile' }
+            ]}
+        />
+    );
+};
+
+// Example usage with nested navigation
+export const AssetDetailBreadcrumb = () => {
+    return (
+        <Breadcrumb
+            items={[
+                { label: 'Home', href: '/' },
+                { label: 'Assets', href: '/assets' },
+                { label: 'Equipment', href: '/assets/equipment' },
+                { label: 'Laptop #12345' }
+            ]}
+        />
+    );
+};
\ No newline at end of file
diff --git a/frontend/components/ui/Breadcrumb.tsx b/frontend/components/ui/Breadcrumb.tsx
new file mode 100644
index 0000000..ce6b46b
--- /dev/null
+++ b/frontend/components/ui/Breadcrumb.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
+    return (
+        <nav aria-label="Breadcrumb" className="flex gap-2 text-sm">
+            {items.map((item, index) => {
+                const isLast = index === items.length - 1;
+
+                return (
+                    <React.Fragment key={index}>
+                        {isLast ? (
+                            <span className="text-gray-600 font-medium" aria-current="page">
+                                {item.label}
+                            </span>
+                        ) : (
+                            <React.Fragment>
+                                <Link
+                                    href={item.href || '#'}
+                                    className="text-blue-600 hover:text-blue-800 hover:underline transition-colors"
+                                >
+                                    {item.label}
+                                </Link>
+                                <span className="text-gray-400" aria-hidden="true">
+                                    /
+                                </span>
+                            </React.Fragment>
+                        )}
+                    </React.Fragment>
+                );
+            })}
+        </nav>
+    );
+};
+
+export default Breadcrumb;
\ No newline at end of file
diff --git a/frontend/components/ui/index.ts b/frontend/components/ui/index.ts
new file mode 100644
index 0000000..d09a192
--- /dev/null
+++ b/frontend/components/ui/index.ts
@@ -0,0 +1 @@
+export { default as Breadcrumb } from './Breadcrumb';
\ No newline at end of file