julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor event management and UI components: Update date handling in EventManagement to format dates for input, enhance EventsSection to display a message when no events are available, and improve styling in multiple components for better layout consistency.
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 3m36s
Details

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-18 08:08:39 +01:00
parent 91460930a4
commit a62e61a314
5 changed files with 58 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
components/events/EventsSection.tsx
View File

@@ -9,34 +9,61 @@ interface EventsSectionProps {
}
export default function EventsSection({ events }: EventsSectionProps) {
if (events.length === 0) {
return null;
}
return (
<section className="w-full bg-gray-950 border-t border-pixel-gold/30 py-16">
<section
className="w-full py-16 border-t relative z-10"
style={{
backgroundColor: "var(--card-column)",
borderColor: "color-mix(in srgb, var(--pixel-gold) 50%, transparent)",
borderTopWidth: "2px",
}}
>
<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>
{events.length === 0 ? (
<div className="text-center">
<p
className="text-base"
style={{ color: "var(--muted-foreground)" }}
>
Aucun événement à venir pour le moment
</p>
</div>
) : (
<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-xs uppercase tracking-widest mb-2"
style={{ color: "var(--pixel-gold)" }}
>
Événement
</span>
<div
className="w-16 h-px"
style={{ backgroundColor: "var(--pixel-gold)" }}
></div>
</div>
<div
className="text-lg font-bold mb-2 uppercase tracking-wide"
style={{ color: "var(--foreground)" }}
>
{new Date(event.date).toLocaleDateString("fr-FR", {
day: "numeric",
month: "long",
year: "numeric",
})}
</div>
<div
className="text-base text-center"
style={{ color: "var(--foreground)" }}
>
{event.name}
</div>
</div>
<div className="text-white text-lg font-bold mb-2 uppercase tracking-wide">
{new Date(event.date).toLocaleDateString("fr-FR", {
day: "numeric",
month: "long",
year: "numeric",
})}
</div>
<div className="text-white text-base text-center">
{event.name}
</div>
</div>
))}
</div>
))}
</div>
)}
</div>
</section>
);