Move evnetPage components

src/pages/Events/EventsPage.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import Event from "../../components/Event/Event.jsx";
+import Event from "./components/Event/Event.jsx";
 import styles from "./EventsPage.module.css";
 import ToolBar from "../../components/ToolBar/ToolBar.jsx";
 import getAllEvents from "../../utils/events/getAllEvents.js";

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;

src/pages/Events/components/Event/Event.module.css

@@ -0,0 +1,127 @@
+.eventContainer {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0;
+    width: 80%;
+    padding: 1rem 0.5rem;
+}
+
+.eventContainerTop {
+    display: flex;
+    justify-content: space-between;
+}
+
+.eventContainerBottom{
+    display: flex;
+    align-items: center;
+    justify-content: end;
+}
+
+.moreLink {
+    width: fit-content;
+}
+
+.eventImageDiv {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+    width: auto;
+    height: 6rem;
+    flex-shrink: 0;
+}
+
+.eventImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 20px;
+}
+
+
+.eventContent {
+    display: flex;
+    width: 100%;
+}
+
+.eventTitle {
+    font-size: 2rem;
+}
+
+.eventButtons {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    width: fit-content;
+    overflow: visible;
+}
+
+.eventButtons a {
+    white-space: nowrap;
+}
+
+.moreButton {
+    background: none;
+    border: none;
+    color: #019AFF;
+    font-size: 1.5rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 55px;
+    height: 55px;
+}
+
+.moreButton:hover {
+    font-size: 2rem;
+    background: rgba(191, 191, 191, 0.5);
+}
+
+.moreButton:focus {
+    outline: none;
+}
+.moreButton:focus-visible {
+    outline: 2px solid black;
+}
+
+.moreButtonClicked {
+    rotate: 90deg;
+}
+
+.eventMenuOpen {
+    display: flex;
+    flex-direction: column;
+    margin-left: 1.5em;
+}
+
+.eventMenuClose {
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+    .eventImage {
+        width: 100%;
+        height: auto;
+        display: block;
+        object-fit: cover;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .eventContainer{
+        padding: 0;
+    }
+
+    .eventImageDiv {
+        margin: 0;
+    }
+
+    .eventContent {
+        flex-direction: column;
+    }
+
+    .eventInfos, .eventContainerBottom {
+        padding: 10px;
+    }
+}