feat: add VersionSupportTable block

src/blocks/VersionSupportTable/index.ts

@@ -0,0 +1,78 @@
+import type { Block } from 'payload'
+
+import { blockFields } from '@root/fields/blockFields'
+
+export const VersionSupportTable: Block = {
+  slug: 'versionSupportTable',
+  fields: [
+    blockFields({
+      name: 'versionSupportTableFields',
+      fields: [
+        {
+          name: 'heading',
+          type: 'text',
+          label: 'Heading',
+        },
+        {
+          name: 'description',
+          type: 'textarea',
+          label: 'Description',
+        },
+        {
+          name: 'rows',
+          type: 'array',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'payloadVersion',
+                  type: 'text',
+                  admin: { width: '20%' },
+                  label: 'Payload Version',
+                  required: true,
+                },
+                {
+                  name: 'releaseDate',
+                  type: 'text',
+                  admin: { width: '20%' },
+                  label: 'Release Date',
+                },
+                {
+                  name: 'criticalFixesUntil',
+                  type: 'text',
+                  admin: { width: '20%' },
+                  label: 'Critical Fixes Until',
+                },
+                {
+                  name: 'securityFixesUntil',
+                  type: 'text',
+                  admin: { width: '20%' },
+                  label: 'Security Fixes Until',
+                },
+                {
+                  name: 'status',
+                  type: 'select',
+                  admin: { width: '20%' },
+                  label: 'Status',
+                  options: [
+                    { label: 'Stable', value: 'stable' },
+                    { label: 'Beta', value: 'beta' },
+                    { label: 'EOL', value: 'eol' },
+                  ],
+                  required: true,
+                },
+              ],
+            },
+          ],
+          label: 'Rows',
+        },
+      ],
+    }),
+  ],
+  interfaceName: 'VersionSupportTableType',
+  labels: {
+    plural: 'Version Support Tables',
+    singular: 'Version Support Table',
+  },
+}

src/collections/Pages.ts

@@ -84,6 +84,7 @@ export const Pages: CollectionConfig = {
                 'steps',
                 'stickyHighlights',
                 'exampleTabs',
+                'versionSupportTable',
               ],
               blocks: [],
               required: true,

src/components/RenderBlocks/index.tsx

@@ -34,6 +34,7 @@ import { Slider } from '@blocks/Slider/index'
 import { Statement } from '@blocks/Statement/index'
 import { Steps } from '@blocks/Steps/index'
 import { StickyHighlights } from '@blocks/StickyHighlights/index'
+import { VersionSupportTable } from '@blocks/VersionSupportTable/index'
 import { getFieldsKeyFromBlock } from '@components/RenderBlocks/utilities'
 import { useThemePreference } from '@root/providers/Theme/index'
 import { toKebabCase } from '@utilities/to-kebab-case'
@@ -71,6 +72,7 @@ const blockComponents = {
   statement: Statement,
   steps: Steps,
   stickyHighlights: StickyHighlights,
+  versionSupportTable: VersionSupportTable,
 }
 
 export type BlocksProp = RelatedPostsBlock | ReusableContent['layout'][0] | ReusableContentBlockType

src/components/blocks/VersionSupportTable/index.module.scss

@@ -0,0 +1,132 @@
+@use '@scss/common' as *;
+
+.heading {
+  margin-bottom: 0.5rem;
+}
+
+.description {
+  @include body;
+  & {
+    color: var(--theme-elevation-500);
+    margin-bottom: 2rem;
+  }
+}
+
+.tableWrap {
+  display: block;
+  overflow-x: scroll;
+  max-width: 100%;
+  margin-inline: 1px;
+}
+
+.table {
+  border-block: 1px solid var(--theme-border-color);
+  border-collapse: collapse;
+  background-color: var(--theme-bg);
+  width: calc(var(--column) * 16 - 2px);
+
+  * {
+    text-align: left;
+    padding: 0;
+    margin: 0;
+  }
+
+  thead {
+    th {
+      @include small;
+      & {
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--theme-elevation-500);
+        font-weight: 500;
+        padding: 1.5rem;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      border-top: 1px solid var(--theme-border-color);
+    }
+
+    td {
+      padding: 1rem 1.5rem;
+      white-space: nowrap;
+    }
+  }
+}
+
+.col {
+  width: calc(var(--column) * 3);
+  min-width: 140px;
+}
+
+.colStatus {
+  width: calc(var(--column) * 2);
+  min-width: 100px;
+}
+
+@include mid-break {
+  .table {
+    width: calc(var(--column) * 8 - 2px);
+  }
+
+  .col {
+    width: auto;
+    min-width: 120px;
+  }
+
+  .colStatus {
+    width: auto;
+    min-width: 80px;
+  }
+}
+
+@include small-break {
+  .table {
+    width: auto;
+  }
+
+  .col {
+    min-width: 110px;
+  }
+
+  .colStatus {
+    min-width: 70px;
+  }
+
+  .table thead th {
+    padding: 1rem;
+  }
+
+  .table tbody td {
+    padding: 0.75rem 1rem;
+  }
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  line-height: 1.4;
+}
+
+.stable {
+  background-color: var(--theme-success-500);
+  color: var(--color-base-950);
+}
+
+.beta {
+  background-color: var(--theme-elevation-200);
+  color: var(--theme-elevation-800);
+}
+
+.eol {
+  background-color: var(--theme-error-500);
+  color: var(--color-base-0);
+}

src/components/blocks/VersionSupportTable/index.tsx

@@ -0,0 +1,82 @@
+import type { Page } from '@types'
+
+import { BackgroundGrid } from '@components/BackgroundGrid'
+import { BlockWrapper, type PaddingProps } from '@components/BlockWrapper/index'
+import { Gutter } from '@components/Gutter'
+import React from 'react'
+
+import classes from './index.module.scss'
+
+type VersionSupportTableProps = {
+  hideBackground?: boolean
+  padding?: PaddingProps
+} & Extract<Page['layout'][0], { blockType: 'versionSupportTable' }>
+
+export const VersionSupportTable: React.FC<VersionSupportTableProps> = (props) => {
+  const { padding, versionSupportTableFields } = props
+  const { description, heading, rows, settings } = versionSupportTableFields || {}
+
+  return (
+    <BlockWrapper padding={padding} settings={settings}>
+      <BackgroundGrid />
+      <Gutter className="grid">
+        <div className="cols-16 cols-m-8">
+          {heading ? <h3 className={classes.heading}>{heading}</h3> : null}
+          {description ? <p className={classes.description}>{description}</p> : null}
+        </div>
+        <div className={[classes.tableWrap, 'cols-16 cols-m-8'].join(' ')}>
+          <table className={classes.table}>
+            <colgroup>
+              <col className={classes.col} />
+              <col className={classes.col} />
+              <col className={classes.col} />
+              <col className={classes.col} />
+              <col className={classes.colStatus} />
+            </colgroup>
+            <thead>
+              <tr>
+                <th>Payload Version</th>
+                <th>Release Date</th>
+                <th>Critical Fixes Until</th>
+                <th>Security Fixes Until</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows?.map(
+                ({
+                  id,
+                  criticalFixesUntil,
+                  payloadVersion,
+                  releaseDate,
+                  securityFixesUntil,
+                  status,
+                }) => (
+                  <tr key={id}>
+                    <td>{payloadVersion}</td>
+                    <td>{releaseDate || '-'}</td>
+                    <td>{criticalFixesUntil || '-'}</td>
+                    <td>{securityFixesUntil || '-'}</td>
+                    <td>
+                      <span
+                        className={[classes.badge, status ? classes[status] : '']
+                          .filter(Boolean)
+                          .join(' ')}
+                      >
+                        {status === 'eol'
+                          ? 'EOL'
+                          : status
+                            ? status.charAt(0).toUpperCase() + status.slice(1)
+                            : ''}
+                      </span>
+                    </td>
+                  </tr>
+                ),
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Gutter>
+    </BlockWrapper>
+  )
+}

src/payload-types.ts

@@ -105,6 +105,7 @@ export interface Config {
     statement: Statement;
     steps: StepsBlock;
     stickyHighlights: StickyHighlights;
+    versionSupportTable: VersionSupportTableType;
     exampleTabs: ExampleTabsBlock;
     spotlight: SpotlightBlock;
     video: VideoBlock;
@@ -749,6 +750,7 @@ export interface Page {
     | StepsBlock
     | StickyHighlights
     | ExampleTabsBlock
+    | VersionSupportTableType
   )[];
   slug?: string | null;
   meta?: {
@@ -2950,6 +2952,36 @@ export interface Command {
   blockName?: string | null;
   blockType: 'command';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "VersionSupportTableType".
+ */
+export interface VersionSupportTableType {
+  versionSupportTableFields?: {
+    settings?: {
+      /**
+       * Leave blank for system default
+       */
+      theme?: ('light' | 'dark') | null;
+      background?: ('solid' | 'transparent' | 'gradientUp' | 'gradientDown') | null;
+    };
+    heading?: string | null;
+    description?: string | null;
+    rows?:
+      | {
+          payloadVersion: string;
+          releaseDate?: string | null;
+          criticalFixesUntil?: string | null;
+          securityFixesUntil?: string | null;
+          status: 'stable' | 'beta' | 'eol';
+          id?: string | null;
+        }[]
+      | null;
+  };
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'versionSupportTable';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "DownloadBlockType".

src/payload.config.ts

@@ -52,6 +52,7 @@ import { Slider } from './blocks/Slider'
 import { Statement } from './blocks/Statement'
 import { Steps } from './blocks/Steps'
 import { StickyHighlights } from './blocks/StickyHighlights'
+import { VersionSupportTable } from './blocks/VersionSupportTable'
 import { CaseStudies } from './collections/CaseStudies'
 import { Categories } from './collections/Categories'
 import { CommunityHelp } from './collections/CommunityHelp'
@@ -152,6 +153,7 @@ export default buildConfig({
     Statement,
     Steps,
     StickyHighlights,
+    VersionSupportTable,
     ExampleTabs,
     {
       slug: 'spotlight',