51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import Link from "next/link";
|
|
|
|
type Chapter = {
|
|
id: number;
|
|
number: number;
|
|
title: string;
|
|
};
|
|
|
|
export function ChapterList({
|
|
chapters,
|
|
mangaSlug,
|
|
}: {
|
|
chapters: Chapter[];
|
|
mangaSlug: string;
|
|
}) {
|
|
if (chapters.length === 0) {
|
|
return (
|
|
<p className="text-muted text-center py-8">No chapters available yet</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{chapters.map((ch) => (
|
|
<Link
|
|
key={ch.id}
|
|
href={`/manga/${mangaSlug}/${ch.number}`}
|
|
scroll={false}
|
|
className="flex items-center justify-between px-4 py-3 bg-surface rounded-xl hover:bg-surface-hover active:scale-[0.98] transition-all"
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<span className="text-accent font-bold text-sm tabular-nums shrink-0">
|
|
#{ch.number}
|
|
</span>
|
|
<span className="text-sm font-medium truncate">{ch.title}</span>
|
|
</div>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
className="w-4 h-4 text-muted shrink-0"
|
|
>
|
|
<polyline points="9 18 15 12 9 6" />
|
|
</svg>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|