25 lines
998 B
React
25 lines
998 B
React
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>
|
|
} |