111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { KomgaSeries } from "@/types/komga";
|
|
import { Book, ImageOff } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface SeriesGridProps {
|
|
series: KomgaSeries[];
|
|
serverUrl: string;
|
|
}
|
|
|
|
// Fonction utilitaire pour obtenir les informations de lecture d'une série
|
|
const getReadingStatusInfo = (series: KomgaSeries) => {
|
|
const { booksCount, booksReadCount, booksUnreadCount } = series;
|
|
const booksInProgressCount = booksCount - (booksReadCount + booksUnreadCount);
|
|
|
|
if (booksReadCount === booksCount) {
|
|
return {
|
|
label: "Lu",
|
|
className: "bg-green-500/10 text-green-500",
|
|
};
|
|
}
|
|
|
|
if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) {
|
|
return {
|
|
label: `${booksReadCount}/${booksCount}`,
|
|
className: "bg-blue-500/10 text-blue-500",
|
|
};
|
|
}
|
|
|
|
return {
|
|
label: "Non lu",
|
|
className: "bg-yellow-500/10 text-yellow-500",
|
|
};
|
|
};
|
|
|
|
export function SeriesGrid({ series, serverUrl }: SeriesGridProps) {
|
|
const router = useRouter();
|
|
|
|
if (!series.length) {
|
|
return (
|
|
<div className="text-center p-8">
|
|
<p className="text-muted-foreground">Aucune série disponible</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-5">
|
|
{series.map((series) => (
|
|
<SeriesCard
|
|
key={series.id}
|
|
series={series}
|
|
onClick={() => router.push(`/series/${series.id}`)}
|
|
serverUrl={serverUrl}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface SeriesCardProps {
|
|
series: KomgaSeries;
|
|
onClick?: () => void;
|
|
serverUrl: string;
|
|
}
|
|
|
|
function SeriesCard({ series, onClick, serverUrl }: SeriesCardProps) {
|
|
const [imageError, setImageError] = useState(false);
|
|
const statusInfo = getReadingStatusInfo(series);
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted"
|
|
>
|
|
{!imageError ? (
|
|
<Image
|
|
src={`/api/komga/images/series/${series.id}/thumbnail`}
|
|
alt={`Couverture de ${series.metadata.title}`}
|
|
fill
|
|
className={`object-cover ${
|
|
series.booksCount === series.booksReadCount ? "opacity-50" : ""
|
|
}`}
|
|
sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<ImageOff className="w-12 h-12" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Overlay avec les informations au survol */}
|
|
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
|
|
<h3 className="font-medium text-sm text-white line-clamp-2">{series.metadata.title}</h3>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`px-2 py-0.5 rounded-full text-xs ${statusInfo.className}`}>
|
|
{statusInfo.label}
|
|
</span>
|
|
<span className="text-xs text-white/80">
|
|
{series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|