yiekheng
4f5d74e1c8
git-subtree-dir: manga-site git-subtree-split: f2ef775f7095dc2b107b576cd4053593e89dd887
40 lines
1.2 KiB
TypeScript
40 lines
1.2 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 relative">
|
|
{chapterCount !== undefined && (
|
|
<span className="absolute -top-2 -right-2 z-10 min-w-[30px] h-[30px] flex items-center justify-center px-1.5 text-sm font-bold bg-accent text-white rounded-lg shadow-[2px_4px_12px_rgba(0,0,0,0.5),0_1px_3px_rgba(0,0,0,0.3)] border border-white/20">
|
|
{chapterCount}
|
|
</span>
|
|
)}
|
|
<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" />
|
|
<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>
|
|
);
|
|
}
|