50 lines
1.9 KiB
React
50 lines
1.9 KiB
React
import styles from "./Event.module.css";
|
|
import {useState} from "react";
|
|
import {Link} from "react-router";
|
|
import Button from "/src/components/ui/button/button.jsx"
|
|
|
|
function Event({event}){
|
|
const [eventMenu, seteventMenu] = useState(false);
|
|
|
|
|
|
return (
|
|
<div className={`${styles.eventContainer} glassCard`}>
|
|
<div className={styles.eventContent}>
|
|
<div className={`${styles.eventImageDiv}`}>
|
|
{event.image == null ? (
|
|
<img src="/src/assets/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
|
|
) : (
|
|
<img src={`/src/assets/` + event.image + `.png`} alt="Photo de l'événement" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className={styles.eventTitle}>{event.name}</p>
|
|
<p>{event.description}</p>
|
|
<div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
|
|
<ul>
|
|
{event.tasks
|
|
.slice(0,5)
|
|
.map((task, index) => (
|
|
<li key={index}> - {task.name}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.eventButtons}>
|
|
<button
|
|
className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
|
|
onClick={()=>{seteventMenu(!eventMenu)}}>
|
|
>
|
|
</button>
|
|
<Link
|
|
to={`/event/` + event.id}
|
|
className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
|
|
<Button>En savoir plus →</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Event; |