A destructive question and a small one

// apps/docs/examples/ui/alert-dialog.tsx'use client';
import {useState} from 'react';import {Trash2Icon} from 'lucide-react';
import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogMedia,  AlertDialogTitle,  AlertDialogTrigger,} from '@workspace/active-ui/components/primitives/alert-dialog';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * A question that must be answered before the reader goes on: delete a * scheme, or discard unsaved changes. The cancel button closes the dialog by * itself; the action is an ordinary button, so it does its work and closes * the dialog through the open state. */export default function AlertDialogExample() {  const [open, setOpen] = useState(false);  const [deleted, setDeleted] = useState(false);  return (    <div className="flex flex-col items-center gap-4">      <div className="flex flex-wrap justify-center gap-2">        <AlertDialog open={open} onOpenChange={setOpen}>          <AlertDialogTrigger            render={<Button variant="destructive" disabled={deleted} />}          >            Delete scheme          </AlertDialogTrigger>          <AlertDialogContent>            <AlertDialogHeader>              <AlertDialogMedia>                <Trash2Icon aria-hidden />              </AlertDialogMedia>              <AlertDialogTitle>Delete Pension scheme 2026?</AlertDialogTitle>              <AlertDialogDescription>                The scheme and its 214 participants are removed. This cannot be                undone.              </AlertDialogDescription>            </AlertDialogHeader>            <AlertDialogFooter>              <AlertDialogCancel>Keep the scheme</AlertDialogCancel>              <AlertDialogAction                variant="destructive"                onClick={() => {                  setDeleted(true);                  setOpen(false);                }}              >                Delete              </AlertDialogAction>            </AlertDialogFooter>          </AlertDialogContent>        </AlertDialog>
        <AlertDialog>          <AlertDialogTrigger render={<Button variant="outline" />}>            Leave the form          </AlertDialogTrigger>          <AlertDialogContent size="sm">            <AlertDialogHeader>              <AlertDialogTitle>Discard your changes?</AlertDialogTitle>              <AlertDialogDescription>                The changes you made to this form are not saved.              </AlertDialogDescription>            </AlertDialogHeader>            <AlertDialogFooter>              <AlertDialogCancel>Stay</AlertDialogCancel>              <AlertDialogCancel variant="default">Discard</AlertDialogCancel>            </AlertDialogFooter>          </AlertDialogContent>        </AlertDialog>      </div>      <p className="text-muted-foreground text-sm" aria-live="polite">        {deleted ? 'The scheme was deleted.' : 'The scheme exists.'}      </p>      {deleted ? (        <Button variant="ghost" size="sm" onClick={() => setDeleted(false)}>          Reset the example        </Button>      ) : null}    </div>  );}