From 4401ec6ee7935d01d4d58094aa8f3989c5ec81fc Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Fri, 7 Feb 2025 20:29:41 +0700
Subject: [PATCH] feat: Horizontal Image Content blocks

---
 src/blocks/BeforeFooter.ts                    |  1 +
 src/blocks/Content.ts                         |  1 +
 src/blocks/HorizontalImageContent.ts          | 21 ++++++++++++++
 src/blocks/OurTeam.ts                         |  1 +
 src/collections/Pages.ts                      |  3 +-
 src/components/Blocks/Content/index.tsx       |  2 +-
 .../Blocks/HorizontalImageContent/index.tsx   | 23 +++++++++++++++
 src/components/Blocks/RenderBlocks.tsx        |  2 ++
 src/payload-types.ts                          | 29 +++++++++++++++++++
 9 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 src/blocks/HorizontalImageContent.ts
 create mode 100644 src/components/Blocks/HorizontalImageContent/index.tsx

diff --git a/src/blocks/BeforeFooter.ts b/src/blocks/BeforeFooter.ts
index 5f25cdf..76f475b 100644
--- a/src/blocks/BeforeFooter.ts
+++ b/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",
diff --git a/src/blocks/Content.ts b/src/blocks/Content.ts
index 0314635..fed61d9 100644
--- a/src/blocks/Content.ts
+++ b/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",
diff --git a/src/blocks/HorizontalImageContent.ts b/src/blocks/HorizontalImageContent.ts
new file mode 100644
index 0000000..a54a0d6
--- /dev/null
+++ b/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,
+    },
+  ],
+};
diff --git a/src/blocks/OurTeam.ts b/src/blocks/OurTeam.ts
index c3b56d4..70d6435 100644
--- a/src/blocks/OurTeam.ts
+++ b/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",
diff --git a/src/collections/Pages.ts b/src/collections/Pages.ts
index 15ceb4f..533af53 100644
--- a/src/collections/Pages.ts
+++ b/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",
diff --git a/src/components/Blocks/Content/index.tsx b/src/components/Blocks/Content/index.tsx
index fbabe54..44e07a4 100644
--- a/src/components/Blocks/Content/index.tsx
+++ b/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 */}
diff --git a/src/components/Blocks/HorizontalImageContent/index.tsx b/src/components/Blocks/HorizontalImageContent/index.tsx
new file mode 100644
index 0000000..e1c7faf
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Blocks/RenderBlocks.tsx b/src/components/Blocks/RenderBlocks.tsx
index c32e572..37a92e3 100644
--- a/src/components/Blocks/RenderBlocks.tsx
+++ b/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<{
diff --git a/src/payload-types.ts b/src/payload-types.ts
index bfd8b52..4a53263 100644
--- a/src/payload-types.ts
+++ b/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