Move evnetPage components

src/pages/Events/components/Event/Event.jsx

@@ -0,0 +1,82 @@
+import styles from "./Event.module.css";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router";
+import Button from "/src/components/ui/button/button.jsx"
+
+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;