52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
// app/raw/[id]/page.tsx
|
|
import RawCloseButton from "@/components/raw/RawCloseButton";
|
|
import prisma from "@/lib/prisma";
|
|
import NextImage from "next/image";
|
|
import { notFound } from "next/navigation";
|
|
|
|
export default async function RawImagePage({ params }: { params: { imageId: string } }) {
|
|
const { imageId } = await params;
|
|
|
|
const image = await prisma.image.findUnique({
|
|
where: { id: imageId },
|
|
include: {
|
|
album: { include: { gallery: true } },
|
|
variants: true,
|
|
palettes: {
|
|
include: { palette: { include: { items: true } } },
|
|
},
|
|
},
|
|
});
|
|
|
|
if (!image) return notFound();
|
|
|
|
const variant = image.variants.find(v => v.type === "watermarked");
|
|
if (!variant) return notFound();
|
|
|
|
const palette = image.palettes.find(p => p.type === "primary")?.palette;
|
|
const hexColors = palette?.items.map(item => item.hex).filter(Boolean) as string[];
|
|
|
|
const backgroundStyle =
|
|
hexColors && hexColors.length > 1
|
|
? { backgroundImage: `linear-gradient(to bottom, ${hexColors.join(", ")})` }
|
|
: { backgroundColor: "#0f0f0f" };
|
|
|
|
const targetHref = `/galleries/${image.album?.gallery?.slug}/${image.album?.slug}/${image.id}`;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center"
|
|
style={backgroundStyle}
|
|
>
|
|
<RawCloseButton targetHref={targetHref} />
|
|
<NextImage
|
|
src={`/api/image/${variant.s3Key}`}
|
|
alt={image.altText || image.imageName}
|
|
width={variant.width}
|
|
height={variant.height}
|
|
className="object-contain rounded-lg max-h-[calc(100vh-4rem)] max-w-[calc(100vw-4rem)]"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|