From 7bd6892cfde591469e3f35c57bb9ab62a944dc4b Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 12 Feb 2025 21:40:21 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20remplacement=20du=20button=20par=20un=20?=
 =?UTF-8?q?div=20pour=20les=20cartes=20m=C3=A9dias?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HeroSection.tsx | 21 +++++++++++++--------
 src/components/home/MediaRow.tsx    | 27 ++++++++++++++++-----------
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 86ef67b..899ebfe 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -51,14 +51,19 @@ function CoverImage({ series }: CoverImageProps) {
   return (
     <div className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden">
       {!imageError ? (
-        <Image
-          src={`/api/komga/images/series/${series.id}/thumbnail`}
-          alt={`Couverture de ${series.metadata.title}`}
-          fill
-          className="object-cover"
-          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
-          onError={() => setImageError(true)}
-        />
+        <div className="absolute inset-0">
+          <Image
+            src={`/api/komga/images/series/${series.id}/thumbnail`}
+            alt={`Couverture de ${series.metadata.title}`}
+            width={200}
+            height={300}
+            className="w-full h-full object-cover"
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
+            priority={true}
+            loading="eager"
+            onError={() => setImageError(true)}
+          />
+        </div>
       ) : (
         <div className="w-full h-full flex items-center justify-center">
           <ImageOff className="w-8 h-8" />
diff --git a/src/components/home/MediaRow.tsx b/src/components/home/MediaRow.tsx
index 334e8fb..69942a2 100644
--- a/src/components/home/MediaRow.tsx
+++ b/src/components/home/MediaRow.tsx
@@ -99,21 +99,26 @@ function MediaCard({ item, onClick }: MediaCardProps) {
   };
 
   return (
-    <button
+    <div
       onClick={handleClick}
-      className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden"
+      className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden cursor-pointer"
     >
       {/* Image de couverture */}
       <div className="relative aspect-[2/3] bg-muted">
         {!imageError ? (
-          <Image
-            src={`/api/komga/images/${isSeries ? "series" : "books"}/${item.id}/thumbnail`}
-            alt={`Couverture de ${title}`}
-            fill
-            className="object-cover"
-            sizes="200px"
-            onError={() => setImageError(true)}
-          />
+          <div className="absolute inset-0">
+            <Image
+              src={`/api/komga/images/${isSeries ? "series" : "books"}/${item.id}/thumbnail`}
+              alt={`Couverture de ${title}`}
+              width={200}
+              height={300}
+              className="w-full h-full object-cover"
+              sizes="200px"
+              priority={true}
+              loading="eager"
+              onError={() => setImageError(true)}
+            />
+          </div>
         ) : (
           <div className="w-full h-full flex items-center justify-center">
             <ImageOff className="w-12 h-12" />
@@ -130,6 +135,6 @@ function MediaCard({ item, onClick }: MediaCardProps) {
           )}
         </div>
       </div>
-    </button>
+    </div>
   );
 }