yaak/src-web/components/CopyIconButton.tsx

import { useTimedBoolean } from "../hooks/useTimedBoolean";
import { copyToClipboard } from "../lib/copy";
import { showToast } from "../lib/toast";
import type { IconButtonProps } from "./core/IconButton";
import { IconButton } from "./core/IconButton";

interface Props extends Omit<IconButtonProps, "onClick" | "icon"> {
  text: string | (() => Promise<string | null>);
}

export function CopyIconButton({ text, ...props }: Props) {
  const [copied, setCopied] = useTimedBoolean();
  return (
    <IconButton
      {...props}
      icon={copied ? "check" : "copy"}
      showConfirm
      onClick={async () => {
        const content = typeof text === "function" ? await text() : text;
        if (content == null) {
          showToast({
            id: "failed-to-copy",
            color: "danger",
            message: "Failed to copy",
          });
        } else {
          copyToClipboard(content, { disableToast: true });
          setCopied();
        }
      }}
    />
  );
}