feat: Horizontal Image Content blocks

This commit is contained in:
RizqiSyahrendra 2025-02-07 20:29:41 +07:00
parent 2f7303d000
commit 4401ec6ee7
9 changed files with 81 additions and 2 deletions

View File

@ -2,6 +2,7 @@ import { Block } from "payload";
export const BeforeFooterBlock: Block = { export const BeforeFooterBlock: Block = {
slug: "beforeFooterBlock", slug: "beforeFooterBlock",
labels: { plural: "Call To Action", singular: "Call To Action" },
fields: [ fields: [
{ {
name: "title", name: "title",

View File

@ -3,6 +3,7 @@ import { Block } from "payload";
export const ContentBlock: Block = { export const ContentBlock: Block = {
slug: "contentBlock", slug: "contentBlock",
labels: { plural: "Contents", singular: "Content" },
fields: [ fields: [
{ {
name: "content", name: "content",

View File

@ -0,0 +1,21 @@
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import { Block } from "payload";
export const HorizontalImageContentBlock: Block = {
slug: "horizontalImageContentBlock",
labels: { plural: "Horizontal Image & Content", singular: "Horizontal Image & Content" },
fields: [
{
name: "img",
type: "upload",
relationTo: "media",
required: true,
},
{
name: "content",
type: "richText",
editor: lexicalEditor({}),
required: true,
},
],
};

View File

@ -2,6 +2,7 @@ import { Block } from "payload";
export const OurTeamBlock: Block = { export const OurTeamBlock: Block = {
slug: "ourTeamBlock", slug: "ourTeamBlock",
labels: { plural: "Our Team", singular: "Our Team" },
fields: [ fields: [
{ {
name: "team", name: "team",

View File

@ -1,5 +1,6 @@
import { BeforeFooterBlock } from "@/blocks/BeforeFooter"; import { BeforeFooterBlock } from "@/blocks/BeforeFooter";
import { ContentBlock } from "@/blocks/Content"; import { ContentBlock } from "@/blocks/Content";
import { HorizontalImageContentBlock } from "@/blocks/HorizontalImageContent";
import { OurTeamBlock } from "@/blocks/OurTeam"; import { OurTeamBlock } from "@/blocks/OurTeam";
import formatSlug from "@/utils/formatSlug"; import formatSlug from "@/utils/formatSlug";
import { CollectionConfig } from "payload"; import { CollectionConfig } from "payload";
@ -35,7 +36,7 @@ export const Pages: CollectionConfig = {
label: "Page Layout", label: "Page Layout",
type: "blocks", type: "blocks",
minRows: 1, minRows: 1,
blocks: [ContentBlock, BeforeFooterBlock, OurTeamBlock], blocks: [ContentBlock, BeforeFooterBlock, OurTeamBlock, HorizontalImageContentBlock],
}, },
{ {
name: "meta", name: "meta",

View File

@ -9,7 +9,7 @@ export function ContentBlock(props: any) {
{/* Content */} {/* Content */}
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
{/* Post */} {/* Post */}
<div className="blog-item mb-80 mb-xs-40"> <div className="blog-item mb-10">
<div className="blog-item-body"> <div className="blog-item-body">
<div> <div>
{/* @ts-ignore */} {/* @ts-ignore */}

View File

@ -0,0 +1,23 @@
import { RichText } from "@payloadcms/richtext-lexical/react";
import Image from "next/image";
export interface HorizontalImageContentBlockProps {
img: { url: string; alt: string };
content: any;
}
export function HorizontalImageContentBlock({ img, content }: HorizontalImageContentBlockProps) {
return (
<div className="container mb-10">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-5">
<div>
<Image src={img.url} width={0} height={0} sizes="100vw" className="w-full h-auto" alt={img.alt} />
</div>
<div>
{/* @ts-ignore */}
<RichText data={content} />
</div>
</div>
</div>
);
}

View File

@ -4,11 +4,13 @@ import type { Page } from "@/payload-types";
import { ContentBlock } from "./Content"; import { ContentBlock } from "./Content";
import { BeforeFooterBlock } from "./BeforeFooter"; import { BeforeFooterBlock } from "./BeforeFooter";
import { OurTeamBlock } from "./OurTeam"; import { OurTeamBlock } from "./OurTeam";
import { HorizontalImageContentBlock } from "./HorizontalImageContent";
const blockComponents = { const blockComponents = {
contentBlock: ContentBlock, contentBlock: ContentBlock,
beforeFooterBlock: BeforeFooterBlock, beforeFooterBlock: BeforeFooterBlock,
ourTeamBlock: OurTeamBlock, ourTeamBlock: OurTeamBlock,
horizontalImageContentBlock: HorizontalImageContentBlock,
}; };
export const RenderBlocks: React.FC<{ export const RenderBlocks: React.FC<{

View File

@ -176,6 +176,27 @@ export interface Page {
blockName?: string | null; blockName?: string | null;
blockType: 'ourTeamBlock'; blockType: 'ourTeamBlock';
} }
| {
img: number | Media;
content: {
root: {
type: string;
children: {
type: string;
version: number;
[k: string]: unknown;
}[];
direction: ('ltr' | 'rtl') | null;
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
indent: number;
version: number;
};
[k: string]: unknown;
};
id?: string | null;
blockName?: string | null;
blockType: 'horizontalImageContentBlock';
}
)[] )[]
| null; | null;
meta?: { meta?: {
@ -540,6 +561,14 @@ export interface PagesSelect<T extends boolean = true> {
id?: T; id?: T;
blockName?: T; blockName?: T;
}; };
horizontalImageContentBlock?:
| T
| {
img?: T;
content?: T;
id?: T;
blockName?: T;
};
}; };
meta?: meta?:
| T | T