Create eventTask component

src/components/eventTask/EventTask.jsx

@@ -0,0 +1,23 @@
+import styles from "./eventTask.module.css";
+import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
+import Button from "../ui/button/button.jsx";
+import assign from "../../utils/tasks/assign.js";
+
+export default function EventTask({ task, index }) {
+
+    const handleRegisterBtn = async (eventId) => {
+        console.log(eventId);
+        await assign(eventId);
+    }
+
+    return <div style={{"--i": index}} key={index} className={styles.content}>
+        <div className={styles.task}>
+            <div>
+                <span><strong>{task.name}</strong></span>
+                <p className={styles.taskDate}> {formatDateLetter(task.start)} - {formatDateLetter(task.end)} </p>
+                <p>{task.description}</p>
+            </div>
+            <Button onClick={() => handleRegisterBtn(task.id)}> S’inscrire </Button>
+        </div>
+    </div>
+}

src/components/eventTask/eventTask.module.css

@@ -0,0 +1,37 @@
+.task {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.taskDate {
+    opacity: 0.5;
+}
+
+.content {
+    margin: 16px 0px 16px 0px;
+    padding: 10px 20px 10px 20px;
+    border-radius: 20px;
+    border: none;
+    background: transparent;
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    animation: fadeInUp 0.6s ease-out forwards;
+    animation-delay: calc(var(--i) * 0.1s);
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

src/pages/eventDetail/eventDetail.jsx

@@ -5,6 +5,7 @@ import getEventById from "../../utils/event/getEventById.js";
 import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
 import Button from "../../components/ui/button/button.jsx";
 import assign from "../../utils/tasks/assign.js";
+import EventTask from "../../components/eventTask/EventTask.jsx";
 
 
 function EventDetail() {
@@ -39,20 +40,11 @@ function EventDetail() {
                 </div>
 
                 <h2>Tâches</h2>
-                <ul className={styles.tasks}>
+                <div className={styles.tasks}>
                     {event?.tasks?.map((task, index) => (
-                        <li style={{"--i": index}} key={index}>
+                        <EventTask task={task} key={index} />
-                            <div className={styles.task}>
-                                <div>
-                                    <span><strong>{task.name}</strong></span>
-                                    <p className={styles.taskDate}> {event && formatDateLetter(task.start)} - {event && formatDateLetter(task.end)} </p>
-                                    <p>{task.description}</p>
-                                </div>
-                                <Button onClick={() => handleRegisterBtn(task.id)}> S’inscrire </Button>
-                            </div>
-                        </li>
                     ))}
-                </ul>
+                </div>
             </div>
         </div>
     );

src/pages/eventDetail/eventDetail.module.css

@@ -42,45 +42,7 @@
     opacity: 0.85;
 }
 
-.task {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-}
-
 .tasks {
     list-style: none;
     padding: 0;
-}
+}
-
-.taskDate {
-    opacity: 0.5;
-}
-
-.tasks li {
-    margin: 16px 0px 16px 0px;
-    padding: 10px 20px 10px 20px;
-    border-radius: 20px;
-    border: none;
-    background: transparent;
-    box-shadow:
-            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
-            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
-            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
-            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
-    opacity: 0;
-    animation: fadeInUp 0.6s ease-out forwards;
-    animation-delay: calc(var(--i) * 0.1s);
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}