Function Actions

app/src/components/Actions.tsx:15–74

()

import { globalZ } from "../lib/globalZ";

export function Actions() {
  const hasProAccess = useHasProAccess();
  const isSandbox = useLocation().pathname === "/";
  const [open, setOpen] = useState(false);
  useEffect(() => {
    // when open, bind a listener to the window that catches clicks which bubble up from the editor-options dropdown
    if (!open) return;
    const listener = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.closest("#editor-options")) {
        // debugger;
        // setOpen(false);
      }
    };

    window.addEventListener("click", listener);

    return () => {
      window.removeEventListener("click", listener);
    };
  }, [setOpen, open]);
  return (
    <>
      <div className="hidden md:flex justify-start w-full gap-x-2 items-center whitespace-nowrap flex-wrap py-2">
        <LoadTemplateDialog />
        <LearnSyntaxDialog />
        {isSandbox ? <LoadFileButton /> : null}
        {hasProAccess ? (
          <ImportDataDialog />
        ) : (
          <ImportDataUnauthenticatedDialog />
        )}
      </div>
      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
        <DropdownMenu.Trigger asChild>
          <button className="md:hidden mr-1 rounded flex self-center items-center justify-center w-8 h-8 bg-neutral-300 hover:bg-neutral-400 focus:outline-none">
            <Sliders size={24} />
          </button>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
          align="end"
          className={classNames(
            "min-w-[220px] bg-white rounded-md shadow-xl select-none p-2",
            globalZ.actionDropdownMobile
          )}
          id="editor-options"
        >
          <LoadTemplateDialog />
          <LearnSyntaxDialog />
          {isSandbox ? <LoadFileButton /> : null}
          {hasProAccess ? (
            <ImportDataDialog />
          ) : (
            <ImportDataUnauthenticatedDialog />
          )}
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    </>