Confirmfeedback

import * as React from "react";import { Button } from "@/components/ui/button";import { ConfirmProvider, useConfirm } from "@/components/ui/confirm-provider";
function DeleteButtons() {  const confirm = useConfirm();  const [result, setResult] = React.useState("none");  return (    <div className="flex flex-col gap-3">      <div className="flex gap-2">        <Button          variant="outline"          onClick={async () => {            const ok = await confirm({ title: "Discard changes?", description: "Unsaved edits are lost." });            setResult(ok ? "discarded" : "kept");          }}        >          Discard        </Button>        <Button          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"          onClick={async () => {            const ok = await confirm({              title: "Delete project",              description: "This cannot be undone.",              tone: "destructive",              requireText: "delete",              confirmLabel: "Delete",              onConfirm: () => new Promise<void>((resolve) => setTimeout(resolve, 300)),            });            setResult(ok ? "deleted" : "kept");          }}        >          Delete project        </Button>      </div>      <p className="text-sm text-muted-foreground">Result: {result}</p>    </div>  );}
export default function ConfirmDemo() {  return (    <ConfirmProvider>      <DeleteButtons />    </ConfirmProvider>  );}