Confirm, cancel and the busy state

// apps/docs/examples/ui/confirm-action-dialog.tsx'use client';
import {useState} from 'react';
import {ConfirmActionDialog} from '@workspace/active-ui/components/composed/confirm-action-dialog';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * Two confirmations. The application owns the open and busy state and runs * the action itself; here the deletion takes two seconds, so the busy state * is visible: a spinner, and both buttons disabled. */export default function ConfirmActionDialogExample() {  const [publishOpen, setPublishOpen] = useState(false);  const [deleteOpen, setDeleteOpen] = useState(false);  const [deleting, setDeleting] = useState(false);  const [log, setLog] = useState('Nothing confirmed yet.');
  return (    <div className="flex flex-col gap-3">      <div className="flex flex-wrap gap-2">        <Button variant="outline" onClick={() => setPublishOpen(true)}>          Publish scheme        </Button>        <Button variant="destructive" onClick={() => setDeleteOpen(true)}>          Delete table        </Button>      </div>      <p role="status" className="text-muted-foreground text-sm">        {log}      </p>
      <ConfirmActionDialog        isOpen={publishOpen}        isLoading={false}        onClose={() => {          setPublishOpen(false);          setLog('Publishing cancelled.');        }}        onConfirm={() => {          setPublishOpen(false);          setLog('Scheme published.');        }}        title="Publish this scheme?"        description="The scheme becomes visible to every employer in this administration."        confirmButtonText="Publish"        cancelButtonText="Cancel"      />
      <ConfirmActionDialog        isOpen={deleteOpen}        isLoading={deleting}        onClose={() => {          setDeleteOpen(false);          setLog('Deletion cancelled.');        }}        onConfirm={() => {          setDeleting(true);          window.setTimeout(() => {            setDeleting(false);            setDeleteOpen(false);            setLog('Table deleted.');          }, 2000);        }}        title="Delete this lookup table?"        description="This cannot be undone. Schemes that refer to the table keep their last calculated values."        confirmButtonText="Delete"        confirmButtonVariant="destructive"        loadingText="Deleting…"        cancelButtonText="Cancel"      />    </div>  );}