Create eventTask component

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}>
-                            <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>
+                        <EventTask task={task} key={index} />
                     ))}
-                </ul>
+                </div>
             </div>
         </div>
     );