47 lines
1.9 KiB
React
47 lines
1.9 KiB
React
import { useMemo } from "react";
|
|
import styles from "./eventList.module.css";
|
|
import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
|
|
|
|
|
|
function EventList({ events }) {
|
|
|
|
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 ? (
|
|
<ul className={styles.eventList}>
|
|
{sortedEvents.map((eventGroup) => (
|
|
<li key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}>
|
|
<div className={styles.eventTitle}>
|
|
<p className={styles.title}>{eventGroup.name}</p>
|
|
<p>{formatDateLetter(eventGroup.start)}</p>
|
|
</div>
|
|
{/* TODO: Faire une liste déroulante pour ne plus afficher les tache */}
|
|
<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>
|
|
</li>
|
|
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p>Aucun événement planifié pour l'instant.</p>
|
|
)}
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default EventList; |