From 95e580aff6dea71ab842a0ed39ddb1e4ca735fe6 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 10 Dec 2025 05:49:44 +0100
Subject: [PATCH] Refactor event date handling in EventsSection and PlayerStats
 components: Serialize event dates for consistent formatting and update date
 display to use localized string representation. Remove profile link from
 Navigation and integrate it into PlayerStats for improved user experience.

---
 app/page.tsx                 |  8 +++++++-
 components/EventsSection.tsx |  6 +++++-
 components/Navigation.tsx    |  6 ------
 components/PlayerStats.tsx   | 37 ++++++++++++++++++++----------------
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 670f317..2674fd6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,11 +11,17 @@ export default async function Home() {
     take: 3,
   });
 
+  // Convert Date objects to strings for serialization
+  const serializedEvents = events.map((event) => ({
+    ...event,
+    date: event.date.toISOString(),
+  }));
+
   return (
     <main className="min-h-screen bg-black relative">
       <NavigationWrapper />
       <HeroSection />
-      <EventsSection events={events} />
+      <EventsSection events={serializedEvents} />
     </main>
   );
 }
diff --git a/components/EventsSection.tsx b/components/EventsSection.tsx
index e912c45..3bee3ed 100644
--- a/components/EventsSection.tsx
+++ b/components/EventsSection.tsx
@@ -25,7 +25,11 @@ export default function EventsSection({ events }: EventsSectionProps) {
                 <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}
+                {new Date(event.date).toLocaleDateString("fr-FR", {
+                  day: "numeric",
+                  month: "long",
+                  year: "numeric",
+                })}
               </div>
               <div className="text-white text-base text-center">
                 {event.name}
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index c26d49f..a72e355 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -80,12 +80,6 @@ export default function Navigation({
           {isAuthenticated ? (
             <>
               <PlayerStats initialUserData={initialUserData} />
-              <Link
-                href="/profile"
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
-              >
-                PROFIL
-              </Link>
               <button
                 onClick={() => signOut()}
                 className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
diff --git a/components/PlayerStats.tsx b/components/PlayerStats.tsx
index 12efa1c..07adc84 100644
--- a/components/PlayerStats.tsx
+++ b/components/PlayerStats.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
 
 interface UserData {
   username: string;
@@ -125,27 +126,31 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
   return (
     <div className="flex items-center gap-3">
       {/* Avatar */}
-      <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900 flex items-center justify-center">
-        {avatar ? (
-          <img
-            src={avatar}
-            alt={username}
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <span className="text-pixel-gold text-xs font-bold">
-            {username.charAt(0).toUpperCase()}
-          </span>
-        )}
-      </div>
+      <Link href="/profile" className="cursor-pointer hover:opacity-80 transition-opacity">
+        <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900 flex items-center justify-center">
+          {avatar ? (
+            <img
+              src={avatar}
+              alt={username}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <span className="text-pixel-gold text-xs font-bold">
+              {username.charAt(0).toUpperCase()}
+            </span>
+          )}
+        </div>
+      </Link>
 
       {/* Stats */}
       <div className="flex flex-col gap-1.5 min-w-[200px]">
         {/* Username & Level */}
         <div className="flex items-center gap-2">
-          <div className="text-pixel-gold font-gaming font-bold text-sm tracking-wider">
-            {username}
-          </div>
+          <Link href="/profile" className="cursor-pointer hover:text-pixel-gold/80 transition-colors">
+            <div className="text-pixel-gold font-gaming font-bold text-sm tracking-wider">
+              {username}
+            </div>
+          </Link>
           <div className="text-gray-400 font-pixel text-xs uppercase border border-pixel-gold/30 px-1.5 py-0.5 bg-black/40">
             Lv.{level}
           </div>