67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Event {
|
|
id: string;
|
|
date: string;
|
|
name: string;
|
|
}
|
|
|
|
export default function EventsSection() {
|
|
const [events, setEvents] = useState<Event[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch("/api/events")
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
// Prendre seulement les 3 premiers événements pour la section d'accueil
|
|
setEvents(data.slice(0, 3));
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.error("Error fetching events:", err);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
|
|
<div className="max-w-7xl mx-auto px-8 text-center text-pixel-gold">
|
|
Chargement...
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
if (events.length === 0) {
|
|
return null;
|
|
}
|
|
return (
|
|
<section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
|
|
<div className="max-w-7xl mx-auto px-8">
|
|
<div className="flex flex-col md:flex-row items-center justify-around gap-8">
|
|
{events.map((event, index) => (
|
|
<div key={index} className="flex flex-col items-center">
|
|
<div className="flex flex-col items-center mb-4">
|
|
<span className="text-pixel-gold text-xs uppercase tracking-widest mb-2">
|
|
Événement
|
|
</span>
|
|
<div className="w-16 h-px bg-pixel-gold"></div>
|
|
</div>
|
|
<div className="text-white text-lg font-bold mb-2 uppercase tracking-wide">
|
|
{event.date}
|
|
</div>
|
|
<div className="text-white text-base text-center">
|
|
{event.name}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|