feat: initial IPFS Portal — Next.js frontend for remote IPFS node management

Multi-file upload with Quick Upload + Crypto Payment tabs. Dashboard with live IPFS metrics, Explorer, Peers, Pins, History, Settings pages. Docker deploy (standalone output), full test suite (16 Playwright tests). Payment integration via IPFSPortalPayment + MockUSDC contracts on zkSync.
2026-06-25 19:47:57 +02:00
commit 1ddc89479c
42 changed files with 8383 additions and 0 deletions
@@ -0,0 +1,39 @@
+'use client';
+
+interface BreadcrumbSegment {
+  cid: string;
+  name: string;
+}
+
+interface BreadcrumbsProps {
+  path: BreadcrumbSegment[];
+  onNavigate: (cid: string) => void;
+}
+
+export default function Breadcrumbs({ path, onNavigate }: BreadcrumbsProps) {
+  return (
+    <nav className="flex items-center flex-wrap gap-1 text-sm">
+      <button
+        onClick={() => onNavigate(path[0]?.cid ?? '')}
+        className="text-surface-400 hover:text-white transition-colors font-medium"
+      >
+        Root
+      </button>
+      {path.map((segment, i) => (
+        <span key={`${segment.cid}-${i}`} className="flex items-center gap-1">
+          <span className="text-surface-600 text-xs">/</span>
+          <button
+            onClick={() => onNavigate(segment.cid)}
+            className={`transition-colors font-mono text-xs ${
+              i === path.length - 1
+                ? 'text-white'
+                : 'text-surface-400 hover:text-white'
+            }`}
+          >
+            {segment.name}
+          </button>
+        </span>
+      ))}
+    </nav>
+  );
+}