40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import Link from "next/link";
|
|
|
|
type MangaCardProps = {
|
|
slug: string;
|
|
title: string;
|
|
coverUrl: string;
|
|
chapterCount?: number;
|
|
};
|
|
|
|
export function MangaCard({
|
|
slug,
|
|
title,
|
|
coverUrl,
|
|
chapterCount,
|
|
}: MangaCardProps) {
|
|
return (
|
|
<Link href={`/manga/${slug}`} className="group block">
|
|
<div className="relative aspect-[3/4] rounded-xl overflow-hidden bg-card">
|
|
<img
|
|
src={coverUrl}
|
|
alt={title}
|
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
|
|
{chapterCount !== undefined && (
|
|
<span className="absolute top-2 right-2 px-2 py-0.5 text-[10px] font-semibold bg-accent/90 text-white rounded-full">
|
|
{chapterCount} ch
|
|
</span>
|
|
)}
|
|
<div className="absolute bottom-0 left-0 right-0 p-3">
|
|
<h3 className="text-sm font-semibold text-white leading-tight line-clamp-2">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|