Merge pull request #330 from ritik4ever/feature/breadcrumb-component-316

feat: implement basic breadcrumb navigation component

Author: yusuftomilola

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' }
+            ]}
+        />
+    );
+};

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;

frontend/components/ui/index.ts

@@ -0,0 +1 @@
+export { default as Breadcrumb } from './Breadcrumb';