add of create event link and sort button
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
.eventContainer {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin: 1rem 0;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.eventImageDiv {
|
||||
@@ -40,10 +40,12 @@
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
width: fit-content;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.eventButtons a {
|
||||
justify-content: flex-end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
+152
-36
@@ -1,5 +1,6 @@
|
||||
import {useState} from "react";
|
||||
import Event from "../../components/Event/Event.jsx";
|
||||
import {Link} from "react-router";
|
||||
import styles from "./EventsPage.module.css"
|
||||
|
||||
|
||||
@@ -7,49 +8,164 @@ import styles from "./EventsPage.module.css"
|
||||
function EventsPage(){
|
||||
const [events, setEvents] = useState([
|
||||
{
|
||||
id : 1,
|
||||
name : "Evénement 1",
|
||||
description : "Voici le premier événement !",
|
||||
image : null,
|
||||
tasks : [{
|
||||
name : "Tâche 1",
|
||||
start : "ih",
|
||||
end : "j",
|
||||
place : "jb",
|
||||
description : "ubu",
|
||||
volunteers_count : 2
|
||||
},
|
||||
{
|
||||
id : 2,
|
||||
name : "Tâche 2",
|
||||
start : "ih",
|
||||
end : "j",
|
||||
place : "jb",
|
||||
description : "ubu",
|
||||
volunteers_count : 2
|
||||
}]
|
||||
id: 1,
|
||||
name: "Marathon de la Ville",
|
||||
description: "Participez au marathon annuel et soutenez les associations locales.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Inscription des participants",
|
||||
start: "08:00",
|
||||
end: "10:00",
|
||||
place: "Centre sportif",
|
||||
description: "Accueillir et enregistrer tous les coureurs.",
|
||||
volunteers_count: 5
|
||||
},
|
||||
{
|
||||
name: "Distribution des dossards",
|
||||
start: "09:00",
|
||||
end: "11:00",
|
||||
place: "Salle principale",
|
||||
description: "Remettre les dossards et goodies aux participants.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name : "Evénement 2",
|
||||
description : "Voici le deuxième événement !",
|
||||
image : null,
|
||||
tasks : [{
|
||||
name : "Tâche 1",
|
||||
start : "ih",
|
||||
end : "j",
|
||||
place : "jb",
|
||||
description : "ubu",
|
||||
volunteers_count : 2
|
||||
}]
|
||||
id: 2,
|
||||
name: "Festival de Musique d’Été",
|
||||
description: "Un week-end de concerts en plein air avec des artistes locaux et internationaux.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Montage de la scène",
|
||||
start: "10:00",
|
||||
end: "14:00",
|
||||
place: "Parc central",
|
||||
description: "Installer la scène, les éclairages et le son.",
|
||||
volunteers_count: 6
|
||||
},
|
||||
{
|
||||
name: "Accueil du public",
|
||||
start: "14:00",
|
||||
end: "20:00",
|
||||
place: "Entrée principale",
|
||||
description: "Vérifier les billets et orienter les visiteurs.",
|
||||
volunteers_count: 4
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Conférence Tech Innovante",
|
||||
description: "Journée de conférences et workshops autour des nouvelles technologies.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Préparation des salles",
|
||||
start: "07:00",
|
||||
end: "09:00",
|
||||
place: "Campus Tech",
|
||||
description: "Installer les chaises, projecteurs et matériel pour les conférences.",
|
||||
volunteers_count: 4
|
||||
},
|
||||
{
|
||||
name: "Accueil des intervenants",
|
||||
start: "08:30",
|
||||
end: "10:00",
|
||||
place: "Hall principal",
|
||||
description: "Assister les speakers et orienter vers les salles.",
|
||||
volunteers_count: 2
|
||||
},
|
||||
{
|
||||
name: "Gestion du buffet",
|
||||
start: "12:00",
|
||||
end: "14:00",
|
||||
place: "Salle de restauration",
|
||||
description: "Distribuer boissons et repas aux participants.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Atelier de Jardinage Urbain",
|
||||
description: "Apprenez à cultiver vos plantes en ville et participez à la création de jardins partagés.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Installation du matériel",
|
||||
start: "09:00",
|
||||
end: "10:00",
|
||||
place: "Jardin partagé",
|
||||
description: "Préparer outils et terreaux pour les participants.",
|
||||
volunteers_count: 2
|
||||
},
|
||||
{
|
||||
name: "Encadrement des participants",
|
||||
start: "10:00",
|
||||
end: "12:00",
|
||||
place: "Jardin partagé",
|
||||
description: "Aider et conseiller sur la plantation et l’entretien.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Collecte de Sang",
|
||||
description: "Aidez à sauver des vies en participant à notre collecte de sang annuelle.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Accueil et enregistrement",
|
||||
start: "08:00",
|
||||
end: "12:00",
|
||||
place: "Salle municipale",
|
||||
description: "Enregistrer les donneurs et expliquer le processus.",
|
||||
volunteers_count: 4
|
||||
},
|
||||
{
|
||||
name: "Préparation des salles",
|
||||
start: "07:30",
|
||||
end: "08:00",
|
||||
place: "Salle municipale",
|
||||
description: "Installer les lits, tables et matériel médical.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
{
|
||||
name: "Assistance post-don",
|
||||
start: "12:00",
|
||||
end: "16:00",
|
||||
place: "Salle municipale",
|
||||
description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
|
||||
volunteers_count: 2
|
||||
},
|
||||
]
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.eventsList}>
|
||||
{events.map((event, index) => (
|
||||
<Event key={index} event={event} />
|
||||
))}
|
||||
<div className={styles.eventsContainer}>
|
||||
<div className={styles.eventsList}>
|
||||
{events.map((event, index) => (
|
||||
<Event key={index} event={event} />
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.eventsButtons}>
|
||||
<Link
|
||||
to="/event/create"
|
||||
className={`${styles.createButton} glassCard`}>
|
||||
+
|
||||
</Link>
|
||||
<button className={`${styles.sortButton} glassCard`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
|
||||
<path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,60 @@
|
||||
.eventsContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.eventsList{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eventsButtons {
|
||||
overflow: visible;
|
||||
position: fixed;
|
||||
top: 10rem;
|
||||
right: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.createButton, .sortButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.createButton {
|
||||
font-size: 2rem;
|
||||
color: #019AFF;
|
||||
}
|
||||
|
||||
.sortButton svg {
|
||||
transform: scale(1.5);
|
||||
fill: #019AFF;
|
||||
}
|
||||
|
||||
.createButton:hover, .sortButton:hover {
|
||||
transform: translateY(-5px);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sortButton:focus {
|
||||
outline: none;
|
||||
}
|
||||
.sortButton:focus-visible {
|
||||
outline: 2px solid black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user