From 9be19a54014f08995a1c29d9bf70a25265a58b57 Mon Sep 17 00:00:00 2001
From: Citali <git@fellies.email>
Date: Sun, 13 Jul 2025 22:17:39 +0200
Subject: [PATCH] Add head banner

---
 prisma/schema.prisma             |  1 +
 src/app/layout.tsx               |  4 ++++
 src/components/global/Banner.tsx | 41 ++++++++++++++++++++++++++++++++
 src/components/global/Header.tsx |  3 ++-
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/global/Banner.tsx

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 5029940..012b51a 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -160,6 +160,7 @@ model PortfolioImage {
   originalFile String  @unique
   nsfw         Boolean @default(false)
   published    Boolean @default(false)
+  setAsHeader  Boolean @default(false)
 
   altText      String?
   description  String?
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aa221de..7c25185 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import Banner from "@/components/global/Banner";
 import Footer from "@/components/global/Footer";
 import Header from "@/components/global/Header";
 import { ThemeProvider } from "@/components/global/ThemeProvider";
@@ -38,6 +39,9 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <div className="flex flex-col min-h-screen min-w-screen">
+            <div>
+              <Banner />
+            </div>
             <header className="sticky top-0 z-50 h-14 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 py-2">
               <Header />
             </header>
diff --git a/src/components/global/Banner.tsx b/src/components/global/Banner.tsx
new file mode 100644
index 0000000..e325bf0
--- /dev/null
+++ b/src/components/global/Banner.tsx
@@ -0,0 +1,41 @@
+import prisma from "@/lib/prisma";
+import Image from "next/image";
+
+export default async function Banner() {
+  const headerImage = await prisma.portfolioImage.findFirst({
+    where: { setAsHeader: true },
+    include: {
+      variants: {
+        where: { type: "modified" },
+        take: 1,
+      },
+    },
+  })
+
+  const alt = headerImage?.altText ?? "Header Image"
+  const title = "Placeholdertitle or logo"
+
+  console.log(headerImage)
+
+  return (
+    <div className="w-full">
+      {headerImage && (
+        <div className="relative w-full h-48 md:h-64 lg:h-72">
+          <Image
+            src={`/api/image/${headerImage.variants[0].s3Key}`}
+            alt={alt}
+            fill
+            className="object-cover"
+            priority
+          />
+          {/* Overlay Logo / Title */}
+          <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-center">
+            <h1 className="text-white text-3xl md:text-5xl font-bold drop-shadow">
+              {title}
+            </h1>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/global/Header.tsx b/src/components/global/Header.tsx
index 4866398..31803c7 100644
--- a/src/components/global/Header.tsx
+++ b/src/components/global/Header.tsx
@@ -2,8 +2,9 @@ import ModeToggle from "./ModeToggle";
 import TopNav from "./TopNav";
 
 export default function Header() {
+
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex items-center justify-between px-4 py-2">
       <TopNav />
       <ModeToggle />
     </div>