Add head banner

This commit is contained in:
2025-07-13 22:17:39 +02:00
parent 08635dc0d5
commit 9be19a5401
4 changed files with 48 additions and 1 deletions

View File

@ -160,6 +160,7 @@ model PortfolioImage {
originalFile String @unique originalFile String @unique
nsfw Boolean @default(false) nsfw Boolean @default(false)
published Boolean @default(false) published Boolean @default(false)
setAsHeader Boolean @default(false)
altText String? altText String?
description String? description String?

View File

@ -1,3 +1,4 @@
import Banner from "@/components/global/Banner";
import Footer from "@/components/global/Footer"; import Footer from "@/components/global/Footer";
import Header from "@/components/global/Header"; import Header from "@/components/global/Header";
import { ThemeProvider } from "@/components/global/ThemeProvider"; import { ThemeProvider } from "@/components/global/ThemeProvider";
@ -38,6 +39,9 @@ export default function RootLayout({
disableTransitionOnChange disableTransitionOnChange
> >
<div className="flex flex-col min-h-screen min-w-screen"> <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 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 />
</header> </header>

View File

@ -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>
);
}

View File

@ -2,8 +2,9 @@ import ModeToggle from "./ModeToggle";
import TopNav from "./TopNav"; import TopNav from "./TopNav";
export default function Header() { export default function Header() {
return ( return (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between px-4 py-2">
<TopNav /> <TopNav />
<ModeToggle /> <ModeToggle />
</div> </div>