Initial commit

packages/marketing-pages/src/ui/components/page-content.client.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { usePageBySlug } from "../hooks/use-page-by-slug";
+import { PageHero } from "./page-hero";
+
+export type PageContentProps = {
+  slug: string;
+};
+
+export function PageContent({ slug }: PageContentProps) {
+  const { data: page } = usePageBySlug(slug);
+
+  if (!page) return null;
+
+  return (
+    <article className="mx-auto max-w-3xl">
+      <PageHero hero={page.hero} />
+      <div className="prose text-foreground">
+        <pre className="whitespace-pre-wrap text-sm">
+          {JSON.stringify(page.layout, null, 2)}
+        </pre>
+      </div>
+    </article>
+  );
+}

packages/marketing-pages/src/ui/components/page-content.server.tsx

@@ -0,0 +1,35 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { marketingPagesContainer } from "../../di/container";
+import { MARKETING_PAGES_SYMBOLS } from "../../di/symbols";
+import type { IGetPageBySlugController } from "../../interface-adapters/controllers/get-page-by-slug.controller";
+import { PageContent as PageContentClient } from "./page-content.client";
+
+export async function PageContent({ slug }: { slug: string }) {
+  const controller = marketingPagesContainer.get<IGetPageBySlugController>(
+    MARKETING_PAGES_SYMBOLS.IGetPageBySlugController,
+  );
+  const page = await controller({ slug });
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(
+    ["marketingPages", "pageBySlug", { input: { slug } }],
+    page,
+  );
+
+  if (!page) {
+    return (
+      <main className="mx-auto max-w-3xl px-6 py-8">
+        <h1 className="text-3xl font-bold text-foreground">Not found</h1>
+        <p className="mt-2 text-muted-foreground">
+          This page hasn&apos;t been published yet.
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <PageContentClient slug={slug} />
+    </HydrationBoundary>
+  );
+}

packages/marketing-pages/src/ui/components/page-hero.tsx

@@ -0,0 +1,16 @@
+import type { Hero } from "../../entities/models/page";
+
+export type PageHeroProps = {
+  hero: Hero;
+};
+
+export function PageHero({ hero }: PageHeroProps) {
+  return (
+    <header className="mb-8">
+      <h1 className="text-3xl font-bold text-foreground">{hero.heading}</h1>
+      {hero.subheading ? (
+        <p className="mt-2 text-lg text-muted-foreground">{hero.subheading}</p>
+      ) : null}
+    </header>
+  );
+}