assetx/webapp/components/layout/Breadcrumb.tsx

"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="/icons/ui/icon-chevron-right.svg"
                alt="›"
                width={14}
                height={14}
                className="flex-shrink-0 dark:invert"
              />
            )}
          </div>
        );
      })}
    </nav>
  );
}