Action button

import { useState } from "react"
import { ActionButton } from "@/components/ui/action-button"

export function SaveNote() {
  const [fail, setFail] = useState(false);
  const [progress, setProgress] = useState<number | undefined>(undefined);
  const [status, setStatus] = useState("3 commits ready · last deploy 2 hours ago");
  function deploy() {
    setStatus("Uploading 214 files to eu-central-1…");
    return new Promise<void>((resolve, reject) => {
      let value = 0;
      setProgress(0);
      const timer = setInterval(() => {
        value += 8;
        if (fail && value >= 62) {
          clearInterval(timer);
          setProgress(undefined);
          setStatus("Build failed at step 3 of 5: missing STRIPE_KEY. Add it in Settings, then retry.");
          reject(new Error("missing STRIPE_KEY"));
          return;
        }
        if (value >= 100) {
          clearInterval(timer);
          setProgress(undefined);
          setStatus("Live at halden.app · deployed 14:32.");
          resolve();
          return;
        }
        setProgress(value);
      }, 90);
    });
  }
  return (
    <div className="grid justify-items-center gap-3">
      <ActionButton
        label="Deploy to production"
        pendingLabel="Uploading"
        successLabel="Deployed"
        errorLabel="Retry deploy"
        progress={progress}
        onAction={deploy}
      />
      <p role="status" className="max-w-xs text-center text-sm text-muted-foreground">{status}</p>
      <label className="flex items-center gap-2 text-xs text-muted-foreground">
        <input type="checkbox" checked={fail} onChange={(event) => setFail(event.target.checked)} />
        Make the build fail
      </label>
    </div>
  );
}