feat: initial commit

src/blocks/Content/Component.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@/utilities/ui'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+import type { ContentBlock as ContentBlockProps } from '@/payload-types'
+
+import { CMSLink } from '../../components/Link'
+
+export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
+  const { columns } = props
+
+  const colsSpanClasses = {
+    full: '12',
+    half: '6',
+    oneThird: '4',
+    twoThirds: '8',
+  }
+
+  return (
+    <div className="container my-16">
+      <div className="grid grid-cols-4 lg:grid-cols-12 gap-y-8 gap-x-16">
+        {columns &&
+          columns.length > 0 &&
+          columns.map((col, index) => {
+            const { enableLink, link, richText, size } = col
+
+            return (
+              <div
+                className={cn(`col-span-4 lg:col-span-${colsSpanClasses[size!]}`, {
+                  'md:col-span-2': size !== 'full',
+                })}
+                key={index}
+              >
+                {richText && <RichText data={richText} enableGutter={false} />}
+
+                {enableLink && <CMSLink {...link} />}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}

src/blocks/Content/config.ts

@@ -0,0 +1,79 @@
+import type { Block, Field } from 'payload'
+
+import {
+  FixedToolbarFeature,
+  HeadingFeature,
+  InlineToolbarFeature,
+  lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+import { link } from '@/fields/link'
+
+const columnFields: Field[] = [
+  {
+    name: 'size',
+    type: 'select',
+    defaultValue: 'oneThird',
+    options: [
+      {
+        label: 'One Third',
+        value: 'oneThird',
+      },
+      {
+        label: 'Half',
+        value: 'half',
+      },
+      {
+        label: 'Two Thirds',
+        value: 'twoThirds',
+      },
+      {
+        label: 'Full',
+        value: 'full',
+      },
+    ],
+  },
+  {
+    name: 'richText',
+    type: 'richText',
+    editor: lexicalEditor({
+      features: ({ rootFeatures }) => {
+        return [
+          ...rootFeatures,
+          HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
+          FixedToolbarFeature(),
+          InlineToolbarFeature(),
+        ]
+      },
+    }),
+    label: false,
+  },
+  {
+    name: 'enableLink',
+    type: 'checkbox',
+  },
+  link({
+    overrides: {
+      admin: {
+        condition: (_data, siblingData) => {
+          return Boolean(siblingData?.enableLink)
+        },
+      },
+    },
+  }),
+]
+
+export const Content: Block = {
+  slug: 'content',
+  interfaceName: 'ContentBlock',
+  fields: [
+    {
+      name: 'columns',
+      type: 'array',
+      admin: {
+        initCollapsed: true,
+      },
+      fields: columnFields,
+    },
+  ],
+}