40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { Image, ImageColor, ImageVariant } from "@/generated/prisma";
|
|
import ImageComponent from "next/image";
|
|
import Link from "next/link";
|
|
|
|
type ImagePaletteWithItems = {
|
|
image: ImageColor & {
|
|
image: Image & {
|
|
variants: ImageVariant[];
|
|
}
|
|
};
|
|
};
|
|
|
|
export default function ImageColorCard({ image }: ImagePaletteWithItems) {
|
|
const thumbnail = image.image.variants.find((v) => v.type === "thumbnail");
|
|
|
|
return (
|
|
<Link
|
|
href={`/images/${image.image.id}`}
|
|
className="block overflow-hidden rounded-md border shadow-sm hover:shadow-md transition-shadow"
|
|
>
|
|
{thumbnail?.s3Key ? (
|
|
<ImageComponent
|
|
src={`/api/image/${thumbnail.s3Key}`}
|
|
alt={image.image.altText || image.image.imageName}
|
|
width={thumbnail.width}
|
|
height={thumbnail.height}
|
|
className="w-full h-auto object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-48 bg-gray-100 flex items-center justify-center text-muted-foreground text-sm">
|
|
No Thumbnail
|
|
</div>
|
|
)}
|
|
<div className="p-2 text-sm truncate">{image.image.imageName} ({image.type})</div>
|
|
</Link>
|
|
);
|
|
}
|