correction erreur et découpage en composant

src/components/homePage/eventList.jsx

@@ -0,0 +1,47 @@
+import {useMemo} from "react";
+import styles from "./eventList.module.css";
+import formatDateLetter from "../../utils/date/formatDateLetter.js";
+function eventList() {
+    const events = {
+        "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
+        "2025-11-10": ["Cours de React", "Rendez-vous médecin"],
+        "2025-11-14": ["Sortie cinéma"],
+        "2025-11-15": ["Sortie cinéma"],
+        "2025-11-17": ["Sortie cinéma"],
+    };
+
+    const sortedEvents = useMemo(() => {
+        return Object.entries(events)
+            .map(([dateKey, eventList]) => ({date: dateKey, events: eventList}))
+            .sort((a, b) => new Date(a.date) - new Date(b.date));
+    }, [events]);
+
+    return (
+        <div className={styles.glassCard}>
+            <div className={styles.eventListContainer}>
+                <h2>Liste des événements à venir</h2>
+                {sortedEvents.length > 0 ? (
+                    <ul className={styles.eventList}>
+                        {sortedEvents.map((eventGroup) => (
+                            <li key={eventGroup.date} className={styles.eventGroup}>
+                                <div className={styles.eventDate}>
+                                    <strong>{formatDateLetter(eventGroup.date)}</strong>
+                                </div>
+                                <ul className={styles.eventDetails}>
+                                    {eventGroup.events.map((event, i) => (
+                                        <li key={i}>- {event}</li>
+                                    ))}
+                                </ul>
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p>Aucun événement planifié pour l'instant.</p>
+                )}
+            </div>
+        </div>
+
+    );
+}
+
+export default eventList;