feat: Horizontal Image Content blocks
This commit is contained in:
parent
2f7303d000
commit
4401ec6ee7
@ -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",
|
||||
|
@ -3,6 +3,7 @@ import { Block } from "payload";
|
||||
|
||||
export const ContentBlock: Block = {
|
||||
slug: "contentBlock",
|
||||
labels: { plural: "Contents", singular: "Content" },
|
||||
fields: [
|
||||
{
|
||||
name: "content",
|
||||
|
21
src/blocks/HorizontalImageContent.ts
Normal file
21
src/blocks/HorizontalImageContent.ts
Normal 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,
|
||||
},
|
||||
],
|
||||
};
|
@ -2,6 +2,7 @@ import { Block } from "payload";
|
||||
|
||||
export const OurTeamBlock: Block = {
|
||||
slug: "ourTeamBlock",
|
||||
labels: { plural: "Our Team", singular: "Our Team" },
|
||||
fields: [
|
||||
{
|
||||
name: "team",
|
||||
|
@ -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",
|
||||
|
@ -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 */}
|
||||
|
23
src/components/Blocks/HorizontalImageContent/index.tsx
Normal file
23
src/components/Blocks/HorizontalImageContent/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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<{
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user