feat: Horizontal Image Content blocks

src/blocks/BeforeFooter.ts

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

src/blocks/Content.ts

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

src/blocks/HorizontalImageContent.ts

@@ -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,
+    },
+  ],
+};

src/blocks/OurTeam.ts

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

src/collections/Pages.ts

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

src/components/Blocks/Content/index.tsx

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

src/components/Blocks/HorizontalImageContent/index.tsx

@@ -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>
+  );
+}

src/components/Blocks/RenderBlocks.tsx

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

src/payload-types.ts

@@ -176,6 +176,27 @@ export interface Page {
             blockName?: string | null;
             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;
   meta?: {
@@ -540,6 +561,14 @@ export interface PagesSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        horizontalImageContentBlock?:
+          | T
+          | {
+              img?: T;
+              content?: T;
+              id?: T;
+              blockName?: T;
+            };
       };
   meta?:
     | T