Function PathBarLink

app/components/PathBar.tsx:101–135

({
  selectedNodes,
  highlightedNodeId,
  enableEdit,
}: PathBarLinkProps)

};

export function PathBarLink({
  selectedNodes,
  highlightedNodeId,
  enableEdit,
}: PathBarLinkProps) {
  const { goToNodeId } = useJsonColumnViewAPI();

  return (
    <div
      className="flex flex-shrink-0 flex-grow-0 overflow-x-hidden"
      onClick={(event) => {
        if (event.detail == 2) {
          enableEdit();
        }
      }}
    >
      {selectedNodes.map((node, index) => {
        return (
          <PathBarItem
            key={index}
            node={node}
            isHighlighted={highlightedNodeId === node.id}
            onClick={(id) => goToNodeId(id, "pathBar")}
            isLast={index == selectedNodes.length - 1}
          />
        );
      })}
      <button
        className="flex ml-auto justify-center items-center w-[26px] h-[26px] hover:bg-slate-300 dark:text-slate-400 dark:hover:bg-white dark:hover:bg-opacity-[10%]"
        onClick={enableEdit}>
        <PencilAltIcon className='h-5' />
      </button>
    </div>
  );
}

export function PathHistoryControls() {
  const { canGoBack, canGoForward } = useJsonColumnViewState();