79 lines
2.9 KiB
React
79 lines
2.9 KiB
React
import styles from "./Event.module.css";
|
|
import {useState, useEffect} from "react";
|
|
import {Link} from "react-router";
|
|
import Button from "/src/components/ui/button/button.jsx"
|
|
|
|
function Event({event}){
|
|
const [eventMenu, seteventMenu] = useState(false);
|
|
const [windowSize, setWindowSize] = useState({
|
|
width: null,
|
|
height: null,
|
|
});
|
|
|
|
useEffect(() => {
|
|
function handleResize() {
|
|
setWindowSize({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
});
|
|
}
|
|
window.addEventListener("resize", handleResize);
|
|
handleResize();
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className={`${styles.eventContainer} glassCard`}>
|
|
<div className={styles.eventContainerTop}>
|
|
<div className={styles.eventContent}>
|
|
<div className={`${styles.eventImageDiv}`}>
|
|
{event.image == null ? (
|
|
<img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
|
|
) : (
|
|
<img src={event.image + `.png`} alt="Photo de l'événement" />
|
|
)}
|
|
</div>
|
|
<div className={styles.eventInfos}>
|
|
<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>
|
|
))}
|
|
{event.tasks.length > 5 ? (
|
|
<li>...</li>
|
|
) : null}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{windowSize.width > 768 ? (
|
|
<div className={styles.eventButtons}>
|
|
<button
|
|
className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
|
|
onClick={()=>{seteventMenu(!eventMenu)}}>
|
|
{">"}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.eventContainerBottom}>
|
|
{(windowSize.width <= 768 || eventMenu) ? (
|
|
<Link
|
|
to={`/event/` + event.id}
|
|
className={styles.moreLink}>
|
|
<Button>En savoir plus →</Button>
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Event; |