Create delete event btn

src/pages/eventDetail/eventDetail.jsx

@@ -1,18 +1,24 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useContext } from "react";
 import styles from "./eventDetail.module.css";
 import { useParams } from "react-router";
 import getEventById from "../../utils/events/getEventById.js";
 import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
 import EventTask from "../../components/eventTask/EventTask.jsx";
+import Button from "../../components/ui/button/button.jsx";
+import Modal from "../../components/ui/modal/modal.jsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
 
 
 function EventDetail() {
 
     const params = useParams();
     const id = params.id;
+    const { user } = useContext(AuthContext)
 
+    const [open, setOpen] = useState(false);
     const [event, setEvent] = useState(null);
 
+
     useEffect(() => {
         (async () => {
             const e = await getEventById(id);
@@ -20,6 +26,10 @@ function EventDetail() {
         }) ()
     }, [])
 
+    const handleDelete = () => {
+        setOpen(true);
+    }
+
     return (
         <div className={styles.allContent}>
             <div className={`glassCard`}>
@@ -27,8 +37,13 @@ function EventDetail() {
                     <img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
                     <div className={styles.eventInfo}>
                         <h2>{event?.name}</h2>
-                        <p>{event && formatDateLetter(event.start)}</p>
-                        <p>{event?.description}</p>
+                        <div className={styles.eventContent}>
+                            <div>
+                                <p>{event && formatDateLetter(event.start)}</p>
+                                <p>{event?.description}</p>
+                            </div>
+                            {user?.isAdmin && <Button variant={"danger"} className={styles.deleteEventBtn} onClick={handleDelete}>Supprimer</Button>}
+                        </div>
                     </div>
                 </div>
 
@@ -39,6 +54,14 @@ function EventDetail() {
                     ))}
                 </div>
             </div>
+
+            <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
+                <div className={styles.modalContent}>
+                    <p>Etes-vous sur de vouloir supprimer l'événement {event?.name} ?</p>
+
+                    <Button variant={"default"}>Confirmer</Button>
+                </div>
+            </Modal>
         </div>
     );
 }

src/pages/eventDetail/eventDetail.module.css

@@ -45,4 +45,20 @@
 .tasks {
     list-style: none;
     padding: 0;
+}
+
+.eventContent {
+    display: flex;
+    justify-content: space-between;
+}
+
+.deleteEventBtn {
+    height: fit-content;
+}
+
+.modalContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
 }