feat(page-header): add new page header block component

Implement a new page header block with title, description and image fields
Add client-side rendering component with responsive layout and styling
Update payload types and block renderer to support the new block type

Author: kelvinkipruto

public/cms/page-header.png

@@ -0,0 +1,50 @@
+import { image } from "@/fields/image";
+import { Block } from "payload";
+
+export const PageHeader: Block = {
+  slug: "page-header",
+  interfaceName: "PageHeaderBlock",
+  imageURL: "/cms/page-header.png",
+  labels: {
+    singular: {
+      en: "Page Header",
+      fr: "En-tête de page",
+    },
+    plural: {
+      en: "Page Headers",
+      fr: "En-têtes de page",
+    },
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+      localized: true,
+      label: {
+        en: "Title",
+        fr: "Titre",
+      },
+    },
+    {
+      name: "description",
+      type: "richText",
+      required: true,
+      localized: true,
+      label: {
+        en: "Description",
+        fr: "Description",
+      },
+    },
+    image({
+      name: "image",
+      required: true,
+      label: {
+        en: "Image",
+        fr: "Image",
+      },
+    }),
+  ],
+};
+
+export default PageHeader;

src/blocks/PageHeader/index.ts

@@ -8,6 +8,7 @@ import { slugField } from "@/fields/slug";
 import { KeyPromises } from "@/blocks/KeyPromises";
 import { ActNow } from "@/blocks/ActNow";
 import { Hero } from "@/blocks/Hero";
+import PageHeader from "@/blocks/PageHeader";
 
 export const Pages: CollectionConfig = {
   slug: "pages",
@@ -45,6 +46,7 @@ export const Pages: CollectionConfig = {
       blocks: [
         ActNow,
         Hero,
+        PageHeader,
         Newsletter,
         Partners,
         LatestPromises,

src/collections/Pages/index.ts

@@ -9,6 +9,7 @@ import { Hero } from "./Hero";
 import Promises from "./Promises";
 import { TenantList } from "./TenantList";
 import { PoliticalEntityList } from "./PoliticalEntityList";
+import PageHeader from "./PageHeader";
 
 type PageBlocks = NonNullable<Page["blocks"]>;
 type PageBlock = PageBlocks extends Array<infer T> ? T : never;
@@ -42,6 +43,7 @@ const blockComponents: Record<string, ComponentType<any>> = {
   "key-promises": KeyPromises,
   "tenant-selection": TenantList,
   "entity-selection": PoliticalEntityList,
+  "page-header": PageHeader,
 };
 
 export const BlockRenderer = ({ blocks, entity }: BlockProps) => {

src/components/BlockRenderer.tsx

@@ -13,31 +13,6 @@ import type {
   NewsletterBlock as NewsletterBlockProps,
 } from "@/payload-types";
 
-const getLocalizedString = (value: unknown): string | null => {
-  if (!value) {
-    return null;
-  }
-
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    return trimmed.length > 0 ? trimmed : null;
-  }
-
-  if (typeof value === "object") {
-    const entries = Object.values(value as Record<string, unknown>);
-    for (const entry of entries) {
-      if (typeof entry === "string") {
-        const trimmed = entry.trim();
-        if (trimmed.length > 0) {
-          return trimmed;
-        }
-      }
-    }
-  }
-
-  return null;
-};
-
 const Newsletter = async ({ image }: NewsletterBlockProps) => {
   const { subdomain } = await getDomain();
   const tenant = await getTenantBySubDomain(subdomain);
@@ -53,9 +28,7 @@ const Newsletter = async ({ image }: NewsletterBlockProps) => {
     return null;
   }
 
-  const title = getLocalizedString(newsletter.title);
-  const description = getLocalizedString(newsletter.description);
-  const embedCode = getLocalizedString(newsletter.embedCode);
+  const { title, description, embedCode } = newsletter;
 
   if (!title || !embedCode) {
     return null;

src/components/Newsletter/Newsletter.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { Box, Container, Typography } from "@mui/material";
+import Grid from "@mui/material/Grid";
+import Image from "next/image";
+import type { DefaultTypedEditorState } from "@payloadcms/richtext-lexical";
+
+import { RichText } from "@/components/RichText";
+
+type PageHeaderImage = {
+  url: string;
+  alt?: string | null;
+} | null;
+
+type Props = {
+  title: string;
+  description: DefaultTypedEditorState;
+  image: PageHeaderImage;
+};
+
+export const PageHeaderClient = ({ title, description, image }: Props) => {
+  if (!title && !description && !image) {
+    return null;
+  }
+
+  return (
+    <Box
+      component="section"
+      sx={(theme) => ({
+        backgroundImage: `linear-gradient(180deg, ${theme.palette.grey[100]} 0%, ${theme.palette.common.white} 100%)`,
+        paddingTop: theme.spacing(8),
+        paddingBottom: theme.spacing(8),
+        [theme.breakpoints.up("md")]: {
+          paddingTop: theme.spacing(12),
+          paddingBottom: theme.spacing(12),
+        },
+      })}
+    >
+      <Container>
+        <Grid container justifyContent="space-between" rowSpacing={6}>
+          <Grid size={{ xs: 12, lg: 7 }}>
+            <Typography
+              variant="h1"
+              sx={{
+                fontWeight: 700,
+                p: 0,
+              }}
+            >
+              {title}
+            </Typography>
+            <Box
+              sx={(theme) => ({
+                width: theme.typography.pxToRem(72),
+                height: theme.typography.pxToRem(4),
+                backgroundColor: theme.palette.text.primary,
+                marginBottom: theme.spacing(3),
+              })}
+            />
+            <RichText
+              data={description}
+              sx={(theme) => ({
+                color: theme.palette.text.primary,
+                fontSize: theme.typography.pxToRem(16),
+                lineHeight: 1.7,
+                maxWidth: "100%",
+                [theme.breakpoints.up("md")]: {
+                  fontSize: theme.typography.pxToRem(18),
+                  maxWidth: "80%",
+                },
+              })}
+            />
+          </Grid>
+          {image ? (
+            <Grid
+              size={{ xs: 12, lg: 5 }}
+              display="flex"
+              justifyContent={{ xs: "center", lg: "flex-end" }}
+            >
+              <Box
+                component="figure"
+                sx={(theme) => ({
+                  margin: 0,
+                  position: "relative",
+                  width: {
+                    xs: theme.typography.pxToRem(260),
+                    sm: theme.typography.pxToRem(320),
+                    lg: theme.typography.pxToRem(400),
+                  },
+                  height: {
+                    xs: theme.typography.pxToRem(220),
+                    sm: theme.typography.pxToRem(260),
+                    lg: theme.typography.pxToRem(320),
+                  },
+                })}
+              >
+                <Image
+                  src={image.url}
+                  alt={image.alt || title || "Page illustration"}
+                  fill
+                  priority
+                  sizes="(max-width: 992px) 320px, 400px"
+                  style={{ objectFit: "contain" }}
+                />
+              </Box>
+            </Grid>
+          ) : null}
+        </Grid>
+      </Container>
+    </Box>
+  );
+};

src/components/PageHeader/PageHeaderClient.tsx

@@ -0,0 +1,22 @@
+import { resolveMedia } from "@/lib/data/media";
+import type { PageHeaderBlock } from "@/payload-types";
+
+import { PageHeaderClient } from "./PageHeaderClient";
+
+const PageHeader = async ({
+  title,
+  description,
+  image,
+}: PageHeaderBlock) => {
+  const resolvedImage = await resolveMedia(image ?? null);
+
+  return (
+    <PageHeaderClient
+      title={title}
+      description={description}
+      image={resolvedImage}
+    />
+  );
+};
+
+export default PageHeader;

src/components/PageHeader/index.tsx

@@ -410,6 +410,7 @@ export interface Page {
     | (
         | ActNowBlock
         | HeroBlock
+        | PageHeaderBlock
         | NewsletterBlock
         | {
             title: string;
@@ -509,6 +510,32 @@ export interface HeroBlock {
   blockName?: string | null;
   blockType: 'hero';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "PageHeaderBlock".
+ */
+export interface PageHeaderBlock {
+  title: string;
+  description: {
+    root: {
+      type: string;
+      children: {
+        type: any;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  };
+  image: string | Media;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'page-header';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "NewsletterBlock".
@@ -1063,6 +1090,7 @@ export interface PagesSelect<T extends boolean = true> {
     | {
         'act-now'?: T | ActNowBlockSelect<T>;
         hero?: T | HeroBlockSelect<T>;
+        'page-header'?: T | PageHeaderBlockSelect<T>;
         newsletter?: T | NewsletterBlockSelect<T>;
         partners?:
           | T
@@ -1144,6 +1172,17 @@ export interface HeroBlockSelect<T extends boolean = true> {
   id?: T;
   blockName?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "PageHeaderBlock_select".
+ */
+export interface PageHeaderBlockSelect<T extends boolean = true> {
+  title?: T;
+  description?: T;
+  image?: T;
+  id?: T;
+  blockName?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "NewsletterBlock_select".