move to git.n39.euall books in the bag ...

frontend/src/shared/components/modals/DeleteBookModal.tsx

@@ -0,0 +1,76 @@
+import { Button, Modal } from "react-bootstrap";
+import { primary, primaryRGBA, secondary } from "../../../colors";
+import { ModalHeader } from "./ModalHeader";
+import { ImBin } from "react-icons/im";
+import { useMutation } from "@tanstack/react-query";
+import { DeleteBookModalProps } from "./types";
+
+export const DeleteBookModal = ({
+  uuid,
+  open,
+  onClose,
+}: Omit<DeleteBookModalProps, "type">): React.JSX.Element => {
+  const { mutate: rm } = useMutation({
+    mutationFn: async () => {
+      await fetch(`/api/books/delete`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ uuid }),
+      });
+      onClose();
+    },
+  });
+
+  return (
+    <Modal
+      show={open}
+      onHide={onClose}
+      style={{ backgroundColor: primaryRGBA }}
+      centered
+    >
+      <ModalHeader
+        onClose={onClose}
+        title={"Move to Shelf"}
+        icon={<ImBin size={50} className='ml-0 mr-auto' />}
+      />
+      <Modal.Body
+        style={{
+          border: "2px solid black",
+          borderTop: "none",
+          backgroundColor: primary,
+        }}
+      >
+        <div className='d-flex mx-auto mb-auto mt-2 w-100'>
+          <Button
+            style={{
+              borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
+              marginLeft: "auto",
+              marginRight: "10px",
+            }}
+            onClick={() => onClose()}
+          >
+            Cancel
+          </Button>
+          <Button
+            style={{
+              borderRadius: "5px",
+              backgroundColor: secondary,
+              color: "black",
+              border: "2px solid black",
+              marginLeft: "auto",
+              marginRight: "10px",
+            }}
+            onClick={() => rm()}
+          >
+            Delete
+          </Button>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};