40 lines
954 B
TypeScript
40 lines
954 B
TypeScript
import Image from "next/image";
|
||
|
||
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) => (
|
||
<div key={index} className="flex items-center gap-[3px]">
|
||
<span
|
||
className={`text-sm font-medium leading-[150%] ${
|
||
index === items.length - 1
|
||
? "text-text-primary font-bold"
|
||
: "text-text-tertiary"
|
||
}`}
|
||
>
|
||
{item.label}
|
||
</span>
|
||
{index < items.length - 1 && (
|
||
<Image
|
||
src="/icon-chevron-right.svg"
|
||
alt="›"
|
||
width={14}
|
||
height={14}
|
||
className="flex-shrink-0"
|
||
/>
|
||
)}
|
||
</div>
|
||
))}
|
||
</nav>
|
||
);
|
||
}
|