Confirm

import { useState } from "react";
import {
  useDelete,
  useRecordContext,
  useResourceContext,
  useRedirect,
} from "ra-core";
import { Button } from "@/components/ui/button";
import { Confirm } from "@/components/admin/confirm";
 
const DeleteButton = () => {
  const resource = useResourceContext();
  const record = useRecordContext();
  const [isOpen, setIsOpen] = useState(false);
  const [deleteOne, { isPending }] = useDelete();
  const redirect = useRedirect();
 
  const handleDelete = () => {
    deleteOne(
      resource,
      { id: record?.id, previousData: record },
      {
        onSuccess: () => {
          setIsOpen(false);
          redirect("list", resource);
        },
      },
    );
  };
 
  return (
    <>
      <Button variant="destructive" onClick={() => setIsOpen(true)}>
        Delete
      </Button>
      <Confirm
        isOpen={isOpen}
        title="Are you sure you want to delete this element?"
        content="This action cannot be undone."
        onConfirm={handleDelete}
        onClose={() => setIsOpen(false)}
        loading={isPending}
      />
    </>
  );
};