82 lines
3.1 KiB
React
82 lines
3.1 KiB
React
import styles from "./Event.module.css";
|
|
import { useState, useEffect } from "react";
|
|
import { useNavigate } from "react-router";
|
|
import Button from "/src/components/ui/button/button"
|
|
|
|
function Event({event}){
|
|
|
|
const navigate = useNavigate();
|
|
|
|
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`} onClick={() => seteventMenu(!eventMenu)}>
|
|
<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>
|
|
{event.tasks != null ? (
|
|
<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>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
{windowSize.width > 768 ? (
|
|
<div className={styles.eventButtons}>
|
|
<Button
|
|
variant={"transparent"}
|
|
onClick={()=>{seteventMenu(!eventMenu)}}
|
|
className={`${eventMenu ? styles.moreButtonClicked : ""}`}
|
|
>
|
|
{">"}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.eventContainerBottom}>
|
|
{(windowSize.width <= 768 || eventMenu) ? (
|
|
|
|
<Button onClick={() => navigate(`/events/` + event.id)}>Voir plus</Button>
|
|
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Event; |