feat(i18n): translate library page

src/components/library/SeriesGrid.tsx

@@ -4,47 +4,52 @@ import { KomgaSeries } from "@/types/komga";
 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { Cover } from "@/components/ui/cover";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface SeriesGridProps {
   series: KomgaSeries[];
 }
 
-// Fonction utilitaire pour obtenir les informations de statut de lecture
-const getReadingStatusInfo = (series: KomgaSeries) => {
+// Utility function to get reading status info
+const getReadingStatusInfo = (series: KomgaSeries, t: (key: string, options?: any) => string) => {
   if (series.booksCount === 0) {
     return {
-      label: "Pas de tomes",
+      label: t("series.status.noBooks"),
       className: "bg-yellow-500/10 text-yellow-500",
     };
   }
 
   if (series.booksCount === series.booksReadCount) {
     return {
-      label: "Lu",
+      label: t("series.status.read"),
       className: "bg-green-500/10 text-green-500",
     };
   }
 
   if (series.booksReadCount > 0) {
     return {
-      label: `${series.booksReadCount}/${series.booksCount}`,
+      label: t("series.status.progress", {
+        read: series.booksReadCount,
+        total: series.booksCount,
+      }),
       className: "bg-blue-500/10 text-blue-500",
     };
   }
 
   return {
-    label: "Non lu",
+    label: t("series.status.unread"),
     className: "bg-yellow-500/10 text-yellow-500",
   };
 };
 
 export function SeriesGrid({ series }: SeriesGridProps) {
   const router = useRouter();
+  const { t } = useTranslate();
 
   if (!series.length) {
     return (
       <div className="text-center p-8">
-        <p className="text-muted-foreground">Aucune série disponible</p>
+        <p className="text-muted-foreground">{t("series.empty")}</p>
       </div>
     );
   }
@@ -63,7 +68,7 @@ export function SeriesGrid({ series }: SeriesGridProps) {
           <Cover
             type="series"
             id={series.id}
-            alt={`Couverture de ${series.metadata.title}`}
+            alt={t("series.coverAlt", { title: series.metadata.title })}
             isCompleted={series.booksCount === series.booksReadCount}
             readBooks={series.booksReadCount}
             totalBooks={series.booksCount}
@@ -73,13 +78,13 @@ export function SeriesGrid({ series }: SeriesGridProps) {
             <div className="flex items-center gap-2">
               <span
                 className={`px-2 py-0.5 rounded-full text-xs ${
-                  getReadingStatusInfo(series).className
+                  getReadingStatusInfo(series, t).className
                 }`}
               >
-                {getReadingStatusInfo(series).label}
+                {getReadingStatusInfo(series, t).label}
               </span>
               <span className="text-xs text-white/80">
-                {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
+                {t("series.books", { count: series.booksCount })}
               </span>
             </div>
           </div>