forked from maik/IPFS-portal
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>
|
||
|
|
);
|
||
|
|
}
|