add of Event module

2025-11-09 19:55:35 +01:00
parent d11873d9f1
commit b3a709a09c
4 changed files with 138 additions and 1 deletions
@@ -0,0 +1,50 @@
+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="/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                    ) : (
+                        <img src={`/public/` + 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;