Move homePage components
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -1,126 +0,0 @@
|
||||
import { useState, useMemo, useEffect } from "react";
|
||||
import styles from "./calendar.module.css";
|
||||
import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js";
|
||||
|
||||
function Calendar({ events = [] }) {
|
||||
|
||||
const monthNames = [
|
||||
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||
];
|
||||
|
||||
const today = new Date();
|
||||
|
||||
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
|
||||
const [currentYear] = useState(today.getFullYear());
|
||||
const [selectedDay, setSelectedDay] = useState(null);
|
||||
|
||||
const eventsByDate = useMemo(() => {
|
||||
return events.reduce((acc, ev) => {
|
||||
if (!ev?.start) return acc;
|
||||
|
||||
const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD
|
||||
if (!acc[dateKey]) acc[dateKey] = [];
|
||||
acc[dateKey].push(ev);
|
||||
return acc;
|
||||
}, {});
|
||||
}, [events]);
|
||||
|
||||
useEffect(() => {
|
||||
const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
||||
|
||||
setSelectedDay({
|
||||
date: key,
|
||||
events: eventsByDate[key] || []
|
||||
});
|
||||
}, [eventsByDate]);
|
||||
|
||||
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
|
||||
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
|
||||
const startDay = (firstDay + 6) % 7;
|
||||
|
||||
const days = [];
|
||||
for (let i = 0; i < startDay; i++) days.push(null);
|
||||
for (let i = 1; i <= daysInMonth; i++) days.push(i);
|
||||
|
||||
const selectDay = (year, month, day) => {
|
||||
const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||||
setSelectedDay({
|
||||
date: key,
|
||||
events: eventsByDate[key] || []
|
||||
});
|
||||
};
|
||||
|
||||
const handleDayClick = (day) => {
|
||||
if (!day) return;
|
||||
selectDay(currentYear, currentMonth, day);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${styles.glassCard} glassCard`}>
|
||||
<div className={styles.calendarContainer}>
|
||||
|
||||
<div className={styles.calendarHeader}>
|
||||
<button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
|
||||
<p>{monthNames[currentMonth]} {currentYear}</p>
|
||||
<button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
|
||||
</div>
|
||||
|
||||
<table className={styles.calendar}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lun</th><th>Mar</th><th>Mer</th>
|
||||
<th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
|
||||
<tr key={w}>
|
||||
{days.slice(w * 7, w * 7 + 7).map((day, i) => {
|
||||
if (!day) return <td key={i}></td>;
|
||||
|
||||
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||||
const hasEvent = (eventsByDate[key]?.length ?? 0) > 0;
|
||||
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
className={[
|
||||
hasEvent ? styles.hasEvent : "",
|
||||
selectedDay?.date === key ? styles.selected : ""
|
||||
].join(" ")}
|
||||
onClick={() => handleDayClick(day)}
|
||||
>
|
||||
{day}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{selectedDay && (
|
||||
<div className={`${styles.eventBox} glassBorder`}>
|
||||
<h3>Événements du {formatDateLetterJS(selectedDay.date)}</h3>
|
||||
|
||||
{selectedDay.events.length > 0 ? (
|
||||
<ul>
|
||||
{selectedDay.events.map(ev => (
|
||||
<li key={ev.id}>
|
||||
<strong>{ev.name}</strong><br />
|
||||
{ev.description}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Aucun événement ce jour-là.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
@@ -1,167 +0,0 @@
|
||||
.calendarContainer {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.calendarHeader {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.calendarHeader p {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.calendarHeader button {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
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);
|
||||
font-size: 15px;
|
||||
color: #019AFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
border-collapse: collapse;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.calendar th, .calendar td {
|
||||
border: none;
|
||||
padding: 10px;
|
||||
width: 14.2%;
|
||||
line-height: 130%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.today {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.hasEvent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hasEvent::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #007bff;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.hasEvent.selected::before {
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.selected::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 38%;
|
||||
pointer-events: 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);
|
||||
}
|
||||
|
||||
.eventBox {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.eventBox ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.eventGroup{
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
margin-top: 16px;
|
||||
border: none;
|
||||
background: rgb(255, 255, 255, 0.25);
|
||||
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);
|
||||
}
|
||||
|
||||
.glassCard {
|
||||
width: 45%;
|
||||
max-height: 79vh;
|
||||
margin: 16px 0 16px 0;
|
||||
padding: 10px 20px 10px 20px;
|
||||
height: fit-content;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
|
||||
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
|
||||
.glassCard::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.glassCard {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
max-height: 450px;
|
||||
}
|
||||
|
||||
.calendarContainer {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import styles from "./eventList.module.css";
|
||||
import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function EventItem({ eventGroup }) {
|
||||
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
|
||||
<div className={styles.eventTitle}>
|
||||
<p className={styles.title}>{eventGroup.name}</p>
|
||||
<p>{formatDateLetter(eventGroup.start)}</p>
|
||||
</div>
|
||||
{isVisible &&
|
||||
<ul className={styles.eventDetails}>
|
||||
{eventGroup.tasks.map((task, i) => (
|
||||
<li key={i} className={styles.eventTasks}>
|
||||
<p>- {task.name} - {task.description}</p>
|
||||
<p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import styles from "./eventList.module.css";
|
||||
import EventItem from "./eventItem";
|
||||
|
||||
|
||||
function EventList({ events }) {
|
||||
|
||||
const sortedEvents = useMemo(() => {
|
||||
return [...events].sort(
|
||||
(a, b) => new Date(a.start) - new Date(b.start)
|
||||
);
|
||||
}, [events]);
|
||||
|
||||
|
||||
return (
|
||||
<div className={`${styles.glassCard} glassCard`}>
|
||||
<h2>Liste des événements à venir</h2>
|
||||
{sortedEvents.length > 0 ? (
|
||||
<div className={styles.eventList}>
|
||||
{sortedEvents.map((eventGroup, index) => (
|
||||
<EventItem eventGroup={eventGroup} key={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p>Aucun événement planifié pour l'instant.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default EventList;
|
||||
@@ -1,85 +0,0 @@
|
||||
.glassCard {
|
||||
width: 45%;
|
||||
max-height: 79vh;
|
||||
margin: 16px 0 16px 0;
|
||||
padding: 10px 20px 10px 20px;
|
||||
height: fit-content;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
|
||||
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.glassCard::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.allContent{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 76px;
|
||||
}
|
||||
|
||||
.eventList {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eventDetails {
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dateSelected{
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.eventGroup{
|
||||
margin: 16px 0 16px 0;
|
||||
padding: 10px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.eventGroup:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eventTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.eventTasks {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.glassCard {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
max-height: 450px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user