Create deleteEvent component

src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx

@@ -0,0 +1,42 @@
+import styles from "../../eventDetail.module.css";
+import Button from "../../../../components/ui/button/button.jsx";
+import Modal from "../../../../components/ui/modal/modal.jsx";
+import { useContext, useState } from "react";
+import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js";
+import { EventContext } from "../../../../contexts/events/EventContext.js";
+import { useNavigate } from "react-router";
+
+export default function DeleteEventBtn({ id }) {
+
+    const { eventInfo } = useContext(EventDetailContext)
+    const { removeEvent } = useContext(EventContext)
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const handleDelete = () => {
+        setOpen(true);
+    }
+
+    const delEvent = async () => {
+        const result = await removeEvent(id);
+
+        if (result.status === 200 || result.status === 204) {
+            setOpen(false);
+            navigate("/events");
+        }
+    }
+
+    return <>
+
+        <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
+            <div className={styles.modalContent}>
+                <p>Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?</p>
+
+                <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
+            </div>
+        </Modal>
+
+    </>
+}