maro
45261a0461
- Next.js 16 App Router site with the ANOUMA design system - Payload CMS (PostgreSQL) for offers, events, posts and page content - WebRTC video-call system with custom signaling server - SMTP email reminders and booking-request notifications - Customer accounts, calendar-based availability, and booking workflow
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { notFound } from "next/navigation";
|
|
import { PageHeader } from "@/components/PageHeader";
|
|
import { Section } from "@/components/Section";
|
|
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
|
|
import { RichText } from "@/components/RichText";
|
|
import { CTA } from "@/components/CTA";
|
|
import { getOfferBySlug } from "@/lib/payload/content";
|
|
import { moodForOffer } from "@/lib/angebote";
|
|
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
|
|
import { OFFER_CATEGORIES } from "@/collections/Offers";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
type Args = { params: Promise<{ slug: string }> };
|
|
|
|
export async function generateMetadata({ params }: Args): Promise<Metadata> {
|
|
const { slug } = await params;
|
|
const offer = await getOfferBySlug(slug);
|
|
if (!offer) return {};
|
|
return {
|
|
title: offer.title,
|
|
description: offer.shortDescription,
|
|
};
|
|
}
|
|
|
|
export default async function OfferDetailPage({ params }: Args) {
|
|
const { slug } = await params;
|
|
const offer = await getOfferBySlug(slug);
|
|
if (!offer) notFound();
|
|
|
|
const categoryLabel = OFFER_CATEGORIES.find((c) => c.value === offer.category)?.label;
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
eyebrow={categoryLabel}
|
|
title={offer.title}
|
|
lead={offer.shortDescription}
|
|
crumbs={[{ title: "Angebote", href: "/angebote" }, { title: offer.title }]}
|
|
/>
|
|
<div className="mx-auto -mt-10 max-w-5xl px-6 sm:px-8 lg:px-12">
|
|
<div className="relative aspect-[21/9] w-full">
|
|
<ImagePlaceholder
|
|
mood={moodForOffer(offer)}
|
|
label={offer.title}
|
|
src={mediaUrl(offer.image, "hero")}
|
|
alt={mediaAlt(offer.image) ?? offer.title}
|
|
shape="soft"
|
|
priority
|
|
className="h-full w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Section tone="plain">
|
|
<div className="mx-auto max-w-2xl">
|
|
<RichText data={offer.description} />
|
|
</div>
|
|
</Section>
|
|
<CTA
|
|
title="Interesse geweckt?"
|
|
lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
|
|
/>
|
|
</>
|
|
);
|
|
}
|