State machine for a "copy text" button using `xstate`

copy.tsx

import { useActor } from "@xstate/react";
import { setup } from "xstate";

const copyMachine = setup({
  types: {
    events: {} as { type: "copy"; text: string },
  },
}).createMachine({
  initial: "Idle",
  states: {
    Idle: {
      on: {
        copy: {
          target: "Copied",
          actions: ({ event }) => {
            window.navigator.clipboard.writeText(event.text);
          },
        },
      },
    },
    Copied: {
      after: {
        2000: "Idle",
      },
    },
  },
});

export default function CopyLink() {
  const [snapshot, send] = useActor(copyMachine);
  return (
    <button onClick={() => send({ type: "copy", text: "some text" })}>
      {snapshot.matches("Copied") ? "Copied!" : "Copy link"}
    </button>
  );
}