Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { Fragment } from "react";
|
|
import { Page } from "../../payload-types";
|
|
import { toKebabCase } from "../../utilities/toKebabCase";
|
|
import { BackgroundColor } from "../BackgroundColor";
|
|
import { VerticalPaddingOptions } from "../VerticalPadding";
|
|
import { CallToActionBlock } from "./CallToAction";
|
|
import { ContentBlock } from "./Content";
|
|
import { MediaBlock } from "./MediaBlock";
|
|
|
|
const blockComponents = {
|
|
cta: CallToActionBlock,
|
|
content: ContentBlock,
|
|
mediaBlock: MediaBlock,
|
|
};
|
|
|
|
const Blocks: React.FC<{
|
|
blocks: Page["layout"];
|
|
}> = (props) => {
|
|
const { blocks } = props;
|
|
|
|
const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
|
|
|
|
if (hasBlocks) {
|
|
return (
|
|
<Fragment>
|
|
{blocks.map((block, index) => {
|
|
const { blockName, blockType } = block;
|
|
|
|
if (blockType && blockType in blockComponents) {
|
|
const Block = blockComponents[blockType];
|
|
const backgroundColor = block[`${blockType}BackgroundColor`];
|
|
const prevBlock = blocks[index - 1];
|
|
const nextBlock = blocks[index + 1];
|
|
|
|
const prevBlockBackground =
|
|
prevBlock?.[`${prevBlock.blockType}BackgroundColor`];
|
|
const nextBlockBackground =
|
|
nextBlock?.[`${nextBlock.blockType}BackgroundColor`];
|
|
|
|
let paddingTop: VerticalPaddingOptions = "large";
|
|
let paddingBottom: VerticalPaddingOptions = "large";
|
|
|
|
if (backgroundColor === prevBlockBackground) {
|
|
paddingTop = "medium";
|
|
}
|
|
|
|
if (backgroundColor === nextBlockBackground) {
|
|
paddingBottom = "medium";
|
|
}
|
|
|
|
if (Block) {
|
|
return (
|
|
<BackgroundColor
|
|
key={index}
|
|
paddingTop={paddingTop}
|
|
paddingBottom={paddingBottom}
|
|
color={backgroundColor}
|
|
>
|
|
<Block
|
|
// @ts-ignore
|
|
id={toKebabCase(blockName)}
|
|
{...block}
|
|
/>
|
|
</BackgroundColor>
|
|
);
|
|
}
|
|
}
|
|
return null;
|
|
})}
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export default Blocks;
|