36 lines
1.0 KiB
React
36 lines
1.0 KiB
React
import { useMemo } from "react";
|
|
import styles from "./eventList.module.css";
|
|
import EventItem from "./eventItem.jsx";
|
|
import { EventContext } from "../../../../contexts/events/EventContext.js";
|
|
import { useContext } from "react";
|
|
|
|
|
|
function EventList() {
|
|
|
|
const { events } = useContext(EventContext);
|
|
|
|
const sortedEvents = useMemo(() => {
|
|
return [...events].sort(
|
|
(a, b) => new Date(a.start) - new Date(b.start)
|
|
);
|
|
}, [events]);
|
|
|
|
|
|
return (
|
|
<div className={`${styles.glassCard} glassCard`}>
|
|
<h2>Liste des événements à venir</h2>
|
|
{sortedEvents.length > 0 ? (
|
|
<div className={styles.eventList}>
|
|
{sortedEvents.map((eventGroup, index) => (
|
|
<EventItem eventGroup={eventGroup} key={index} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p>Aucun événement planifié pour l'instant.</p>
|
|
)}
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default EventList; |