Develop Frontend Components for Project, Package, and Instance Views

frontend/src/components/Breadcrumb.tsx

@@ -0,0 +1,38 @@
+import { Link } from 'react-router-dom';
+import './Breadcrumb.css';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export function Breadcrumb({ items, className = '' }: BreadcrumbProps) {
+  return (
+    <nav className={`breadcrumb ${className}`.trim()} aria-label="Breadcrumb">
+      <ol className="breadcrumb__list">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li key={index} className="breadcrumb__item">
+              {!isLast && item.href ? (
+                <>
+                  <Link to={item.href} className="breadcrumb__link">
+                    {item.label}
+                  </Link>
+                  <span className="breadcrumb__separator">/</span>
+                </>
+              ) : (
+                <span className="breadcrumb__current">{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}