chadtmiller.com/pds.js

Switch repository

Loading…

import { Link } from '#/components/atoms/link.jsx';

/**
 * The repository, each directory on the way to the path in view, and then
 * the path itself. Every crumb but the last one navigates; the repository
 * crumb opens its root.
 */
export function Breadcrumbs({ repo, refName, path }) {
  const segments = path.split('/').filter(Boolean);
  const base = `/${encodeURIComponent(repo)}/tree/${encodeURI(refName)}`;
  let walked = '';

  return (
    <nav className="min-w-0 break-words text-[14px]">
      <Link href={`/${encodeURIComponent(repo)}`}>{repo}</Link>
      {segments.map((segment, index) => {
        walked = walked ? `${walked}/${segment}` : segment;
        const last = index === segments.length - 1;
        return (
          <span key={walked}>
            <span className="px-1.5 text-faint">/</span>
            {last ? (
              <span className="font-semibold text-foreground">{segment}</span>
            ) : (
              <Link href={`${base}/${encodeURI(walked)}`}>{segment}</Link>
            )}
          </span>
        );
      })}
    </nav>
  );
}