refacto(images): component cover dans refacto services and routes

src/components/home/HeroSection.tsx

@@ -1,11 +1,7 @@
 "use client";
 
 import { KomgaSeries } from "@/types/komga";
-import Image from "next/image";
-import { useState } from "react";
-import { ImageOff } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { ImageLoader } from "@/components/ui/image-loader";
+import { Cover } from "@/components/ui/cover";
 
 interface HeroSectionProps {
   series: KomgaSeries[];
@@ -22,7 +18,18 @@ export function HeroSection({ series }: HeroSectionProps) {
       {/* Grille de couvertures en arrière-plan */}
       <div className="absolute inset-0 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 p-4 opacity-10">
         {series?.map((series) => (
-          <CoverImage key={series.id} series={series} />
+          <div
+            key={series.id}
+            className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden"
+          >
+            <Cover
+              type="series"
+              id={series.id}
+              alt={`Couverture de ${series.metadata.title}`}
+              quality={25}
+              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
+            />
+          </div>
         ))}
       </div>
 
@@ -41,40 +48,3 @@ export function HeroSection({ series }: HeroSectionProps) {
     </div>
   );
 }
-
-interface CoverImageProps {
-  series: KomgaSeries;
-}
-
-function CoverImage({ series }: CoverImageProps) {
-  const [imageError, setImageError] = useState(false);
-  const [imageLoading, setImageLoading] = useState(true);
-
-  return (
-    <div className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden">
-      {!imageError ? (
-        <>
-          <ImageLoader isLoading={imageLoading} />
-          <Image
-            src={`/api/komga/images/series/${series.id}/thumbnail`}
-            alt={`Couverture de ${series.metadata.title}`}
-            fill
-            className={cn(
-              "object-cover transition-opacity duration-300",
-              imageLoading ? "opacity-0" : "opacity-100"
-            )}
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
-            loading="lazy"
-            quality={25}
-            onError={() => setImageError(true)}
-            onLoad={() => setImageLoading(false)}
-          />
-        </>
-      ) : (
-        <div className="w-full h-full flex items-center justify-center">
-          <ImageOff className="w-8 h-8" />
-        </div>
-      )}
-    </div>
-  );
-}