UI overhault

components/layout/Breadcrumb.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav className="px-6 py-2 bg-white border-b border-gray-200" aria-label="Breadcrumb">
+      <ol className="flex flex-wrap items-center space-x-2 text-xs text-gray-500">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <React.Fragment key={index}>
+              {index > 0 && (
+                <li aria-hidden="true" className="mx-1 text-gray-400">
+                  /
+                </li>
+              )}
+              <li>
+                {isLast ? (
+                  <span className="font-semibold text-gray-700" aria-current="page">
+                    {item.label}
+                  </span>
+                ) : item.href ? (
+                  <Link
+                    href={item.href}
+                    className="hover:text-blue-600 transition-colors focus-ring rounded"
+                  >
+                    {item.label}
+                  </Link>
+                ) : (
+                  <span>{item.label}</span>
+                )}
+              </li>
+            </React.Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}