45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { MangaCard } from "./MangaCard";
|
|
|
|
type Manga = {
|
|
slug: string;
|
|
title: string;
|
|
coverUrl: string;
|
|
_count?: { chapters: number };
|
|
};
|
|
|
|
export function MangaGrid({ manga }: { manga: Manga[] }) {
|
|
if (manga.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-24 text-center">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
className="w-16 h-16 text-muted/40 mb-4"
|
|
>
|
|
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
|
|
</svg>
|
|
<p className="text-muted text-lg font-medium">No manga yet</p>
|
|
<p className="text-muted/60 text-sm mt-1">
|
|
Check back soon for new titles
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 sm:gap-4">
|
|
{manga.map((m) => (
|
|
<MangaCard
|
|
key={m.slug}
|
|
slug={m.slug}
|
|
title={m.title}
|
|
coverUrl={m.coverUrl}
|
|
chapterCount={m._count?.chapters}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|