Marco
098ba79c8f
app/[slug]/page.tsx and LivePageContent.tsx no longer render a hardcoded H1 from page.title — that's now the Hero block's job (see HeroBlock.ts's own comment on why). Breadcrumb stays, still built from page.title. Also backfilled /lebensuhr's already-migrated Pages document with a Hero block (order 0) carrying its real headline — without it the page would have lost its H1 entirely once the hardcoded wrapper was removed.
200 lines
8.7 KiB
TypeScript
200 lines
8.7 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { PageBlock } from "../lib/payload";
|
|
import { getTestimonials } from "../lib/payload";
|
|
import { RichText } from "./RichText";
|
|
import { Quote } from "./Quote";
|
|
import { StepArrow } from "./StepArrow";
|
|
import { STEP_ICONS, SYMBOLIC_ICONS } from "./icons/StepIcons";
|
|
import { TestimonialsGrid } from "./TestimonialsGrid";
|
|
|
|
// Renders a Payload Pages document's `layout` blocks field — structurally
|
|
// parallel to RichText.tsx's own `blocks: {...}` converter map, but one
|
|
// level up (full page sections, not inline Lexical nodes). Each block
|
|
// component reuses the exact same visual treatment already hand-built on
|
|
// /lebensuhr, /3x3-system, and /7-tage-klarheits-check, rather than
|
|
// inventing new styling — this is what those pages' repeated patterns get
|
|
// consolidated into for CMS-driven pages going forward.
|
|
export async function PageBlocks({ blocks }: { blocks: PageBlock[] }) {
|
|
const rendered = await Promise.all(
|
|
blocks.map(async (block) => {
|
|
if (block.blockType === "testimonialsRef") {
|
|
const testimonials = await getTestimonials(block.page);
|
|
if (testimonials.length === 0) return null;
|
|
return <TestimonialsGrid key={block.id} testimonials={testimonials} />;
|
|
}
|
|
return renderPageBlockSync(block);
|
|
})
|
|
);
|
|
return <>{rendered}</>;
|
|
}
|
|
|
|
// Every block EXCEPT testimonialsRef (needs its own async data fetch,
|
|
// which a client component can't await — see LivePageContent.tsx, which
|
|
// uses this directly and simply skips that one block type in preview,
|
|
// same "live-previewable subset" scope-cut LivePostContent.tsx already
|
|
// makes for its own author-bio/"Weiterlesen" chrome).
|
|
export function renderPageBlockSync(block: PageBlock): React.ReactNode {
|
|
switch (block.blockType) {
|
|
// Same "font-playfair clamp headline" treatment every hand-built page
|
|
// (/lebensuhr, /3x3-system, /ueber-mich) used for its own H1 before
|
|
// this block existed — see HeroBlock.ts's own comment on why the
|
|
// headline moved out of Pages.title and into here.
|
|
case "hero":
|
|
return (
|
|
<div key={block.id} className="flex flex-col gap-4 items-start">
|
|
<p
|
|
className="font-semibold text-[clamp(2.25rem,1.393rem+1.786vw,3rem)] text-text-primary leading-[1.15]"
|
|
style={{ fontFamily: "var(--font-playfair)" }}
|
|
>
|
|
{block.headline}
|
|
</p>
|
|
{block.subline && <p className="text-body text-text-muted">{block.subline}</p>}
|
|
{block.ctaLabel && block.ctaHref && (
|
|
<Link
|
|
href={block.ctaHref}
|
|
className="inline-flex items-center gap-2 bg-brand hover:brightness-95 active:scale-[0.97] transition-all rounded-sm px-6 py-3 font-semibold text-body text-text-primary"
|
|
>
|
|
{block.ctaLabel}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
case "richTextSection":
|
|
return <RichText key={block.id} content={block.content} />;
|
|
|
|
case "quote":
|
|
return <Quote key={block.id}>{block.text}</Quote>;
|
|
|
|
case "icon": {
|
|
const SymbolIcon = SYMBOLIC_ICONS[block.icon];
|
|
return SymbolIcon ? <div key={block.id}>{SymbolIcon()}</div> : null;
|
|
}
|
|
|
|
case "image":
|
|
if (!block.image) return null;
|
|
return (
|
|
<div key={block.id} className="flex flex-col gap-2 w-full">
|
|
<div className="relative w-full aspect-[3/2] rounded-xl overflow-hidden bg-bg-muted">
|
|
<Image alt={block.caption ?? ""} src={block.image} fill sizes="(min-width: 768px) 48rem, 100vw" className="object-contain" />
|
|
</div>
|
|
{block.caption && <p className="text-body-sm text-text-muted text-center">{block.caption}</p>}
|
|
</div>
|
|
);
|
|
|
|
case "pillList":
|
|
return (
|
|
<div key={block.id} className="flex flex-wrap gap-2">
|
|
{block.items.map((item) => (
|
|
<span key={item.id} className="text-body-sm text-text-muted bg-bg-muted rounded-full px-3 py-1">{item.label}</span>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case "checklistImage":
|
|
return (
|
|
<div key={block.id} className="flex flex-col lg:flex-row gap-8 lg:gap-10 items-center w-full">
|
|
{block.image && (
|
|
<div className="relative w-full lg:w-[44%] lg:shrink-0 rounded-xl overflow-hidden bg-bg-muted" style={{ minHeight: "16rem" }}>
|
|
<Image alt="" src={block.image} fill sizes="(min-width: 1024px) 44vw, 100vw" className="object-cover" />
|
|
</div>
|
|
)}
|
|
<ul className="flex-1 w-full flex flex-col gap-4">
|
|
{block.items.map((item) => (
|
|
<li key={item.id} className="flex items-start gap-3">
|
|
<CheckIcon />
|
|
<p className="text-body text-text-body">{item.text}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
case "table":
|
|
return (
|
|
<div key={block.id} className="bg-bg-muted rounded-xl overflow-hidden w-full">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b-2 border-brand">
|
|
<th className="py-3 pl-6 pr-4 font-semibold text-body-sm text-text-primary uppercase tracking-wide">{block.labelHeader}</th>
|
|
<th className="py-3 pr-6 font-semibold text-body-sm text-text-primary uppercase tracking-wide">{block.valueHeader}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{block.rows.map((row, i) => (
|
|
<tr key={row.id} className={i % 2 === 1 ? "bg-bg-base/60" : undefined}>
|
|
<td className="py-2.5 pl-6 pr-4 text-body text-text-body">{row.label}</td>
|
|
<td className="py-2.5 pr-6 font-semibold text-body text-text-primary">{row.value}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
|
|
case "stepRow": {
|
|
const icons = block.items.map((item) => STEP_ICONS[item.icon]);
|
|
return (
|
|
<div key={block.id} className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
|
|
{block.items.flatMap((item, i) => [
|
|
<div key={item.id} className="group flex flex-col items-center gap-4 lg:gap-5 flex-1 min-w-0">
|
|
<div className="flex items-center justify-center w-16 h-14 shrink-0 transition-transform duration-300 group-hover:scale-110">
|
|
{icons[i]?.()}
|
|
</div>
|
|
<div className="flex flex-col gap-1 text-center">
|
|
<p className="font-semibold text-text-primary text-[1rem]">{item.title}</p>
|
|
{item.subtitle && <p className="font-semibold text-[0.75rem] text-brand">{item.subtitle}</p>}
|
|
<p className="text-[0.875rem] text-text-muted leading-[1.5]">{item.description}</p>
|
|
</div>
|
|
</div>,
|
|
i < block.items.length - 1 ? (
|
|
<div key={`arrow-${item.id}`} className="flex items-center justify-center shrink-0 lg:mt-5">
|
|
<StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
|
|
</div>
|
|
) : null,
|
|
])}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
case "testimonialsRef":
|
|
// Needs an async fetch — handled by PageBlocks (server) above.
|
|
// Skipped in the client-side live-preview renderer.
|
|
return null;
|
|
|
|
case "ctaCard":
|
|
return (
|
|
<Link
|
|
key={block.id}
|
|
href={block.href}
|
|
className="group flex items-center justify-between gap-4 border border-border rounded-md px-6 py-5 hover:border-brand transition-colors"
|
|
>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="font-bold text-[0.8125rem] text-brand">{block.eyebrow}</p>
|
|
<p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>{block.title}</p>
|
|
{block.description && <p className="text-body-sm text-text-muted">{block.description}</p>}
|
|
</div>
|
|
<svg viewBox="0 0 20 20" className="size-4 shrink-0 text-text-primary transition-transform duration-200 group-hover:translate-x-1" fill="none" aria-hidden="true">
|
|
<path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</Link>
|
|
);
|
|
|
|
default:
|
|
// Unknown/malformed block — same "skip rather than crash" convention
|
|
// RichText.tsx's own blocks use.
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Same checkmark used by /lebensuhr's and /7-tage-klarheits-check's own
|
|
// checklists.
|
|
function CheckIcon() {
|
|
return (
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
|
|
<path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|