Function PathPreview

app/components/PathPreview.tsx:29–132

({
  nodes,
  maxComponents,
  enabled,
}: PathPreviewProps)

type Component = ValueComponent | EllipsisComponent;

export function PathPreview({
  nodes,
  maxComponents,
  enabled,
}: PathPreviewProps) {
  const isEnabled = useMemo(() => {
    if (enabled === undefined) {
      return true;
    }
    return enabled;
  }, [enabled]);

  const { goToNodeId } = useJsonColumnViewAPI();

  const components = useMemo<Array<Component>>(() => {
    if (maxComponents == null || nodes.length <= maxComponents) {
      return nodes.map((n) => {
        return { type: "value", id: n.id, title: n.title, icon: n.icon };
      });
    }

    let components = Array<Component>();

    //add the elements up to the ellipsis
    for (let index = 0; index < maxComponents - 1; index++) {
      const node = nodes[index];
      components.push({
        type: "value",
        id: node.id,
        title: node.title,
        icon: node.icon,
      });
    }

    //add ellipsis
    components.push({ type: "ellipsis", id: "ellipsis" });

    //add final element
    const lastNode = nodes[nodes.length - 1];
    components.push({
      type: "value",
      id: lastNode.id,
      title: lastNode.title,
      icon: lastNode.icon,
    });

    return components;
  }, [nodes, maxComponents]);

  return (
    <div
      className={`flex select-none pl-7 ${
        isEnabled
          ? `relative transition hover:bg-slate-200 hover:cursor-pointer dark:hover:bg-slate-600 after:transition after:absolute after:h-3 after:w-3 after:opacity-0 hover:after:opacity-100 after:top-1 after:left-1 after:content-[''] after:bg-[url('${eyeIcon}')] after:bg-no-repeat`
          : "disabled"
      }`}
      onClick={() =>
        isEnabled &&