Hide event tasks

src/components/homePage/eventItem.jsx

@@ -0,0 +1,25 @@
+import styles from "./eventList.module.css";
+import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
+import { useState } from "react";
+
+export default function EventItem({ eventGroup }) {
+
+    const [isVisible, setIsVisible] = useState(false);
+
+    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
+        <div className={styles.eventTitle}>
+            <p className={styles.title}>{eventGroup.name}</p>
+            <p>{formatDateLetter(eventGroup.start)}</p>
+        </div>
+        {isVisible &&
+            <ul className={styles.eventDetails}>
+                {eventGroup.tasks.map((task, i) => (
+                    <li key={i} className={styles.eventTasks}>
+                        <p>- {task.name} - {task.description}</p>
+                        <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                    </li>
+                ))}
+            </ul>
+        }
+    </div>
+}