Breadcrumbs

export function Breadcrumbs({
  items,
}: {
  items: { label: string; href?: string }[];
}) {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center gap-2 text-sm">
        {items.map((item, i) => (
          <li key={item.label} className="flex items-center gap-2">
            {item.href ? (
              <a
                href={item.href}
                className="group relative text-stone-500 transition-colors hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-emerald-600 dark:focus-visible:outline-emerald-400 rounded-sm"
              >
                {item.label}
                <span className="absolute inset-x-0 -bottom-0.5 h-px origin-left scale-x-0 bg-emerald-700 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:bg-emerald-600" />
              </a>
            ) : (
              <span aria-current="page" className="font-medium text-stone-900 dark:text-stone-100">
                {item.label}
              </span>
            )}
            {i < items.length - 1 && <span className="text-stone-300 dark:text-stone-600">/</span>}
          </li>
        ))}
      </ol>
    </nav>
  );
}