41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { Image } from "@/generated/prisma";
|
|
import clsx from "clsx";
|
|
import NextImage from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function ImageList({ images, gallerySlug, albumSlug }: { images: Image[], gallerySlug: string, albumSlug: string }) {
|
|
|
|
return (
|
|
<section>
|
|
<h1 className="text-2xl font-bold mb-4">Images</h1>
|
|
<div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
|
|
{images ? images.map((img) => (
|
|
<Link href={`/galleries/${gallerySlug}/${albumSlug}/${img.id}`} key={img.id}>
|
|
<div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background">
|
|
<div className="relative aspect-[4/3] w-full bg-muted items-center justify-center">
|
|
{img.fileKey ? (
|
|
<NextImage
|
|
src={`/api/image/thumbnails/${img.fileKey}.webp`}
|
|
alt={img.imageName}
|
|
fill
|
|
className={clsx(
|
|
" object-cover",
|
|
img.nsfw && "blur-md scale-105"
|
|
)}
|
|
/>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
No cover image
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-4">
|
|
<h2 className="text-lg font-semibold truncate text-center">{img.imageName}</h2>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)) : "There are no images here!"}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |