NewScratchButton

tcmts.studio.NewScratchButton · #vxvopnx4 · term · runs in the browser

uses useState

Start a scratch file (newScratch), and open it.

import { navigate } from "#codebase/tcmts/react";
import { at, toasts } from "#codebase/tcmts/share";
import { newScratch } from "#codebase/tcmts/studio";
import { useState } from "react";
import { Button } from "react-aria-components";

export function NewScratchButton({ small }: { small?: boolean }) {
  const [busy, setBusy] = useState(false);
  return (
    <Button
      className={small ? "btn small" : "btn primary"}
      isPending={busy}
      onPress={async () => {
        setBusy(true);
        try {
          navigate(at(`/scratch/${encodeURIComponent(await newScratch())}`));
        } catch (e) {
          setBusy(false);
          toasts.add(
            {
              title: "Couldn't start a scratch file",
              description: (e as Error).message,
              tone: "bad",
            },
            { timeout: 8000 },
          );
        }
      }}
    >
      New scratch file
    </Button>
  );
}

uses

used by