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 = {
|
export const BeforeFooterBlock: Block = {
|
||||||
slug: "beforeFooterBlock",
|
slug: "beforeFooterBlock",
|
||||||
|
labels: { plural: "Call To Action", singular: "Call To Action" },
|
||||||
fields: [
|
fields: [
|
||||||
{
|
{
|
||||||
name: "title",
|
name: "title",
|
||||||
|
@ -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",
|
||||||
|
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 = {
|
export const OurTeamBlock: Block = {
|
||||||
slug: "ourTeamBlock",
|
slug: "ourTeamBlock",
|
||||||
|
labels: { plural: "Our Team", singular: "Our Team" },
|
||||||
fields: [
|
fields: [
|
||||||
{
|
{
|
||||||
name: "team",
|
name: "team",
|
||||||
|
@ -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",
|
||||||
|
@ -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 */}
|
||||||
|
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 { 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<{
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user