Function PathBarText

app/components/PathBar.tsx:50–93

({ selectedNodes, onConfirm }: { selectedNodes: ColumnViewNode[], onConfirm: (newPath: string) => void; })

}

export function PathBarText({ selectedNodes, onConfirm }: { selectedNodes: ColumnViewNode[], onConfirm: (newPath: string) => void; }) {
  const [path, setPath] = useState('');
  const ref = useRef<HTMLInputElement>(null);

  useEffect(() => {
    setPath(selectedNodes.at(-1)?.id || '');
  }, [selectedNodes]);

  useEffect(() => {
    if (ref.current) {
      ref.current.focus();
    }
  }, [ref]);

  return (
    <form
      onSubmit={(e) => {
        onConfirm(path);
        e.preventDefault();
      }}
      // onBlur={() => onConfirm(path)}
      className="flex overflow-x-hidden items-center bg-slate-300 dark:bg-slate-700 rounded-sm"
    >
      <label className="grow">
        <input
          ref={ref}
          className={
            "w-full border-none outline-none text-ellipsis text-base px-2 py-0 rounded-sm bg-transparent dark:text-slate-200"
          }
          style={{ boxShadow: 'none' }}
          type="text"
          name="title"
          spellCheck="false"
          placeholder="Name your JSON file"
          value={path}
          onChange={(e) => setPath(e.target.value)}
        />
      </label>
      <button type="submit" className="flex ml-auto justify-center items-center w-[26px] h-[26px] hover:bg-slate-400 dark:text-slate-400 dark:hover:bg-white dark:hover:bg-opacity-[10%]">
        <CheckIcon className='h-5' />
      </button>
    </form>
  );
}

export type PathBarLinkProps = {
  selectedNodes: ColumnViewNode[];