forked from maik/IPFS-portal
maikrolf
1ddc89479c
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.
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
'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>
|
|
);
|
|
}
|