feat: get action page to render other blocks

Author: mvriu5

src/app/(landing)/[locale]/actions/page.tsx

@@ -1,25 +1,21 @@
-import { ActionsPageClient } from "@/components/ActionsPageClient"
 import { Aurora } from "@/components/ui/Aurora"
 import { LandingContainer } from "@/components/ui/LandingContainer"
+import { PageBlocks } from "@/components/PageBlockRenderer"
 import { createLandingMetadata, getPageLocale, type LocalePageParams } from "@/lib/appRoute"
 import { getActions, getLandingPage } from "@/lib/cms"
-import { findPageBlock } from "@/lib/pageBlocks"
 
 export const generateMetadata = createLandingMetadata("actions")
 
 export default async function ActionsPage({ params }: { params: LocalePageParams }) {
     const locale = await getPageLocale(params)
-    const [actions, actionsPage] = await Promise.all([
-        getActions(locale),
-        getLandingPage("actions", locale),
-    ])
-    const actionsBlock = findPageBlock(actionsPage, "actions")
+    const [actions, actionsPage] = await Promise.all([getActions(locale), getLandingPage("actions", locale)])
 
     return (
         <>
             <Aurora />
-            <LandingContainer className="pt-32">
-                <ActionsPageClient actions={actions} locale={locale} content={actionsBlock} />
+            <LandingContainer>
+                <div className="h-12 lg:h-16" aria-hidden="true" />
+                <PageBlocks blocks={actionsPage?.layout} actions={actions} locale={locale} />
             </LandingContainer>
         </>
     )

src/components/PageBlockRenderer.tsx

@@ -20,17 +20,20 @@ import { StandaloneCardSection } from "./sections/StandaloneCardSection"
 import { VideoSection } from "./sections/VideoSection"
 import { WideHeroSection } from "./sections/WideHeroSection"
 import { StatsSection } from "./sections/StatsSection"
+import { ActionsPageClient } from "./ActionsPageClient"
+import type { ActionItem } from "@/lib/cms"
 
 type PageBlock = NonNullable<Page["layout"]>[number]
 
 interface PageBlocksRendererProps {
     blocks?: PageBlock[] | null
+    actions?: ActionItem[]
     cardRowChildren?: ReactNode
     ctaFloating?: boolean
     locale?: AppLocale
 }
 
-type PageBlockRenderOptions = Pick<PageBlocksRendererProps, "cardRowChildren" | "ctaFloating" | "locale">
+type PageBlockRenderOptions = Pick<PageBlocksRendererProps, "actions" | "cardRowChildren" | "ctaFloating" | "locale">
 type BlockRenderer = (block: PageBlock, options: PageBlockRenderOptions) => ReactNode
 
 const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>> = {
@@ -53,17 +56,18 @@ const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>>
     widehero: (block) => <WideHeroSection content={block as Extract<PageBlock, { blockType: "widehero" }>} />,
     listFeature: (block) => <ListFeatureSection content={block as Extract<PageBlock, { blockType: "listFeature" }>} />,
     stats: (block) => <StatsSection content={block as Extract<PageBlock, { blockType: "stats" }>} />,
+    actions: (block, options) => <ActionsPageClient actions={options.actions ?? []} locale={options.locale ?? "en"} content={block as Extract<PageBlock, { blockType: "actions" }>} />,
 }
 
 function renderPageBlock(block: PageBlock, options: PageBlockRenderOptions) {
     const renderer = pageBlockRenderers[block.blockType]
     return renderer ? renderer(block, options) : null
 }
 
-export function PageBlocks({ blocks, cardRowChildren, ctaFloating = false, locale }: PageBlocksRendererProps) {
+export function PageBlocks({ blocks, actions, cardRowChildren, ctaFloating = false, locale }: PageBlocksRendererProps) {
     const renderableBlocks =
         blocks?.flatMap((block) => {
-            const element = renderPageBlock(block, { cardRowChildren, ctaFloating, locale })
+            const element = renderPageBlock(block, { actions, cardRowChildren, ctaFloating, locale })
             return element ? [{ block, element }] : []
         }) ?? []