Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create eventTask component

Browse Source
This commit is contained in:
T'JAMPENS QUENTIN p2406187
2026-01-12 14:32:34 +01:00
parent 8d0174e47e
commit 00c02a4c30
4 changed files with 65 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/eventTask/EventTask.jsx
+23
View File
@@ -0,0 +1,23 @@
import styles from "./eventTask.module.css";
import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
import Button from "../ui/button/button.jsx";
import assign from "../../utils/tasks/assign.js";
export default function EventTask({ task, index }) {
const handleRegisterBtn = async (eventId) => {
console.log(eventId);
await assign(eventId);
}
return <div style={{"--i": index}} key={index} className={styles.content}>
<div className={styles.task}>
<div>
<span><strong>{task.name}</strong></span>
<p className={styles.taskDate}> {formatDateLetter(task.start)} - {formatDateLetter(task.end)} </p>
<p>{task.description}</p>
</div>
<Button onClick={() => handleRegisterBtn(task.id)}> S’inscrire </Button>
</div>
</div>
}
src/components/eventTask/eventTask.module.css
+37
View File
@@ -0,0 +1,37 @@
.task {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.taskDate {
opacity: 0.5;
}
.content {
margin: 16px 0px 16px 0px;
padding: 10px 20px 10px 20px;
border-radius: 20px;
border: none;
background: transparent;
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
animation-delay: calc(var(--i) * 0.1s);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
src/pages/eventDetail/eventDetail.jsx
+4 -12
View File
@@ -5,6 +5,7 @@ import getEventById from "../../utils/event/getEventById.js";
import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
import Button from "../../components/ui/button/button.jsx";
import assign from "../../utils/tasks/assign.js";
import EventTask from "../../components/eventTask/EventTask.jsx";
function EventDetail() {
@@ -39,20 +40,11 @@ function EventDetail() {
</div>
<h2>Tâches</h2>
<ul className={styles.tasks}>
<div className={styles.tasks}>
{event?.tasks?.map((task, index) => (
<li style={{"--i": index}} key={index}>
<div className={styles.task}>
<div>
<span><strong>{task.name}</strong></span>
<p className={styles.taskDate}> {event && formatDateLetter(task.start)} - {event && formatDateLetter(task.end)} </p>
<p>{task.description}</p>
</div>
<Button onClick={() => handleRegisterBtn(task.id)}> S’inscrire </Button>
</div>
</li>
<EventTask task={task} key={index} />
))}
</ul>
</div>
</div>
</div>
);
src/pages/eventDetail/eventDetail.module.css
+1 -39
View File
@@ -42,45 +42,7 @@
opacity: 0.85;
}
.task {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.tasks {
list-style: none;
padding: 0;
}
.taskDate {
opacity: 0.5;
}
.tasks li {
margin: 16px 0px 16px 0px;
padding: 10px 20px 10px 20px;
border-radius: 20px;
border: none;
background: transparent;
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
animation-delay: calc(var(--i) * 0.1s);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}