Confirmation dialog

import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertTitle,
} from "@gpuixui/components/alert";
import { ConfirmDialog } from "@gpuixui/components/confirm-dialog";
import { Button } from "@gpuixui/primitives";
import { useState } from "react";

export const ArchiveProject = () => {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const archive = async () => {
    setSaving(true);
    setError(null);
    try {
      await archiveProject();
      setOpen(false);
    } catch {
      setError("The workspace service timed out. Nothing was archived.");
    } finally {
      setSaving(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Archive project
      </Button>
      <ConfirmDialog
        open={open}
        onOpenChange={setOpen}
        title="Archive this project?"
        description="The project leaves everyone's sidebar. Its 18 open tasks stay attached and no files are deleted."
        confirmLabel={error === null ? "Archive project" : "Try again"}
        tone="danger"
        loading={saving}
        onConfirm={() => void archive()}
      >
        {error === null ? null : (
          <Alert tone="danger">
            <AlertContent>
              <AlertTitle>Archive failed</AlertTitle>
              <AlertDescription>{error}</AlertDescription>
            </AlertContent>
          </Alert>
        )}
      </ConfirmDialog>
    </>
  );
};

ConfirmDialog
├── DialogContent
│   ├── DialogHeader
│   └── footer (actions)
└── children