54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import Image from "next/image";
|
|||
|
|
import Link from "next/link";
|
|||
|
|
|
|||
|
|
interface BreadcrumbItem {
|
|||
|
|
label: string;
|
|||
|
|
href?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface BreadcrumbProps {
|
|||
|
|
items: BreadcrumbItem[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Breadcrumb({ items }: BreadcrumbProps) {
|
|||
|
|
return (
|
|||
|
|
<nav className="flex items-center gap-[3px] h-5">
|
|||
|
|
{items.map((item, index) => {
|
|||
|
|
const isLast = index === items.length - 1;
|
|||
|
|
const content = (
|
|||
|
|
<span
|
|||
|
|
className={`text-sm font-medium leading-[150%] ${
|
|||
|
|
isLast
|
|||
|
|
? "text-text-primary dark:text-white font-bold"
|
|||
|
|
: "text-text-tertiary dark:text-gray-400 hover:text-text-secondary dark:hover:text-gray-300 transition-colors cursor-pointer"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{item.label}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={index} className="flex items-center gap-[3px]">
|
|||
|
|
{!isLast && item.href ? (
|
|||
|
|
<Link href={item.href}>{content}</Link>
|
|||
|
|
) : (
|
|||
|
|
content
|
|||
|
|
)}
|
|||
|
|
{!isLast && (
|
|||
|
|
<Image
|
|||
|
|
src="/icon-chevron-right.svg"
|
|||
|
|
alt="›"
|
|||
|
|
width={14}
|
|||
|
|
height={14}
|
|||
|
|
className="flex-shrink-0 dark:invert"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</nav>
|
|||
|
|
);
|
|||
|
|
}
|