feat: add navigation to carousels and fix data loading

- Fix cache issues in home API route - Add navigation to series/books in MediaRow carousels - Improve Hero section visual with overflow handling - Simplify data structure and API responses
2025-02-11 22:40:28 +01:00
parent e4a663b6d4
commit ba12c87e57
7 changed files with 465 additions and 44 deletions
--- a/src/components/home/MediaRow.tsx
+++ b/src/components/home/MediaRow.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { KomgaBook, KomgaSeries } from "@/types/komga";
+import { ChevronLeft, ChevronRight, ImageOff } from "lucide-react";
+import Image from "next/image";
+import { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface MediaRowProps {
+  title: string;
+  items: (KomgaSeries | KomgaBook)[];
+  onItemClick?: (item: KomgaSeries | KomgaBook) => void;
+}
+
+export function MediaRow({ title, items, onItemClick }: MediaRowProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(true);
+
+  const handleScroll = () => {
+    if (!scrollContainerRef.current) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+    setShowLeftArrow(scrollLeft > 0);
+    setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 10);
+  };
+
+  const scroll = (direction: "left" | "right") => {
+    if (!scrollContainerRef.current) return;
+
+    const scrollAmount = direction === "left" ? -400 : 400;
+    scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+  };
+
+  if (!items.length) return null;
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+      <div className="relative group">
+        {/* Bouton de défilement gauche */}
+        {showLeftArrow && (
+          <button
+            onClick={() => scroll("left")}
+            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/90 shadow-md border opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Défiler vers la gauche"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+        )}
+
+        {/* Conteneur défilant */}
+        <div
+          ref={scrollContainerRef}
+          onScroll={handleScroll}
+          className="flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth pb-4"
+        >
+          {items.map((item) => (
+            <MediaCard key={item.id} item={item} onClick={() => onItemClick?.(item)} />
+          ))}
+        </div>
+
+        {/* Bouton de défilement droit */}
+        {showRightArrow && (
+          <button
+            onClick={() => scroll("right")}
+            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/90 shadow-md border opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Défiler vers la droite"
+          >
+            <ChevronRight className="h-6 w-6" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface MediaCardProps {
+  item: KomgaSeries | KomgaBook;
+  onClick?: () => void;
+}
+
+function MediaCard({ item, onClick }: MediaCardProps) {
+  const [imageError, setImageError] = useState(false);
+
+  // Déterminer si c'est une série ou un livre
+  const isSeries = "booksCount" in item;
+  const title = isSeries
+    ? item.metadata.title
+    : item.metadata.title || `Tome ${item.metadata.number}`;
+
+  return (
+    <button
+      onClick={onClick}
+      className="flex-shrink-0 w-[200px] group 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"
+    >
+      {/* 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="w-full h-full flex items-center justify-center">
+            <ImageOff className="w-12 h-12" />
+          </div>
+        )}
+      </div>
+
+      {/* Contenu */}
+      <div className="flex flex-col p-2">
+        <h3 className="font-medium line-clamp-2 text-sm">{title}</h3>
+        {isSeries && (
+          <p className="text-xs text-muted-foreground mt-1">
+            {item.booksCount} tome{item.booksCount > 1 ? "s" : ""}
+          </p>
+        )}
+      </div>
+    </button>
+  );
+}