rikx-beheer/app/website/[slug]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import { requireAdmin } from "../../../lib/auth";
import {
  getPage,
  listBlockTranslationsForEditor,
  listContentBlocks,
  listMediaImages,
  listPageTranslations,
} from "../../../lib/cms";
import { AppHeader } from "../../AppHeader";
import { PageEditor } from "../PageEditor";

export default async function WebsitePageEditor({ params }: { params: Promise<{ slug: string }> }) {
  const session = await requireAdmin();
  const { slug } = await params;
  const page = getPage(slug);
  if (!page) notFound();

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
      <AppHeader email={session.email} active="website" />

      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-10">
        <Link href="/website" className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100">
          ← Pagina&apos;s
        </Link>
        <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mt-2">
          {page.nav_label || page.meta_title || slug}
        </h1>
        <p className="text-sm text-zinc-500 mt-1 mb-6">/{slug}</p>

        <PageEditor
          slug={slug}
          page={page}
          blocks={listContentBlocks(slug)}
          mediaImages={listMediaImages()}
          pageTranslations={listPageTranslations(slug)}
          blockTranslations={listBlockTranslationsForEditor(slug)}
        />
      </main>
    </div>
  );
}