Add better image styles

2025-06-29 01:56:19 +02:00
parent ee79f75668
commit ac3b19a1f2
16 changed files with 378 additions and 104 deletions
--- a/src/app/(raw)/layout.tsx
+++ b/src/app/(raw)/layout.tsx
@ -0,0 +1,42 @@
+import { ThemeProvider } from "@/components/global/ThemeProvider";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
--- a/src/app/(raw)/raw/[imageId]/page.tsx
+++ b/src/app/(raw)/raw/[imageId]/page.tsx
@ -0,0 +1,51 @@
+// 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 } = 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 = `/${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>
+  );
+}