Merge pull request #1 from coopsdev/icon-row

Icon Row + Container blocks

.github/workflows/release.yml

@@ -67,6 +67,9 @@ jobs:
           cd /srv/portfolio
           pnpm install
 
+      - name: Generate updated types
+        run: pnpm generate:types
+
       - name: Restore permissions in production directory
         run: |
           sudo chown -R www-data:www-data /srv/portfolio/

package.json

@@ -27,6 +27,7 @@
     "@payloadcms/plugin-nested-docs": "^1.0.12",
     "@payloadcms/plugin-redirects": "^1.0.2",
     "@payloadcms/plugin-seo": "^1.0.15",
+    "@payloadcms/richtext-lexical": "^0.11.3",
     "@payloadcms/richtext-slate": "^1.5.2",
     "cross-env": "^7.0.3",
     "dotenv": "^8.6.0",

src/app/(pages)/styleguide/icon-row-block/page.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+import { IconRow } from '../../../../app/_blocks/IconRow'
+import { Gutter } from '../../../_components/Gutter'
+import { VerticalPadding } from '../../../_components/VerticalPadding'
+import { mergeOpenGraph } from '../../../_utilities/mergeOpenGraph'
+
+// Example data for IconRow
+const exampleIconRow = {
+  blockType: 'iconRow' as 'iconRow',
+  blockName: 'Icon Row',
+  introContent: [],
+  subheading: 'Example Subheading',
+  icons: [
+    { iconTitle: 'Icon 1', iconImage: { url: '/path/to/icon1.jpg' } },
+    { iconTitle: 'Icon 2', iconImage: { url: '/path/to/icon2.jpg' } },
+  ],
+}
+
+export default function IconRowStyleguide() {
+  return (
+    <Gutter>
+      <VerticalPadding bottom="large" top="none">
+        <h1>Icon Row Example</h1>
+        <IconRow {...exampleIconRow} />
+        <Link href="/styleguide">Back to Styleguide</Link>
+      </VerticalPadding>
+    </Gutter>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'Icon Row Styleguide',
+  description: 'Showcasing the Icon Row component.',
+  openGraph: mergeOpenGraph({
+    title: 'Icon Row Styleguide',
+    url: '/styleguide/icon-row',
+  }),
+}

src/app/(pages)/styleguide/icon-row-container-block/page.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+import { IconRowContainer } from '../../../_blocks/IconRowContainer'
+import { Gutter } from '../../../_components/Gutter'
+import { VerticalPadding } from '../../../_components/VerticalPadding'
+import { mergeOpenGraph } from '../../../_utilities/mergeOpenGraph'
+
+// Example data for IconRowContainer, possibly including multiple IconRows
+const iconRowContainerData = {
+  blockType: 'iconRowContainer' as 'iconRowContainer',
+  blockName: 'Icon Row Container',
+  introContent: [],
+  mainHeading: 'Main Heading Example',
+  rows: [
+    {
+      subheading: 'Subheading 1',
+      icons: [
+        { iconTitle: 'Icon 1', iconImage: { url: '/path/to/icon1.jpg' } },
+        { iconTitle: 'Icon 2', iconImage: { url: '/path/to/icon2.jpg' } },
+      ],
+    },
+  ],
+}
+
+export default function IconRowContainerStyleguide() {
+  return (
+    <Gutter>
+      <VerticalPadding bottom="large" top="none">
+        <h1>Icon Row Container Example</h1>
+        <IconRowContainer {...iconRowContainerData} />
+        <Link href="/styleguide">Back to Styleguide</Link>
+      </VerticalPadding>
+    </Gutter>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'Icon Row Container Styleguide',
+  description: 'Showcasing the Icon Row Container component.',
+  openGraph: mergeOpenGraph({
+    title: 'Icon Row Container Styleguide',
+    url: '/styleguide/icon-row-container',
+  }),
+}

src/app/_blocks/IconRow/index.module.scss

@@ -0,0 +1,20 @@
+.iconRow {
+  padding: 20px;
+  background-color: #f0f0f0; // example background color
+
+  h3 {
+    margin-bottom: 10px;
+  }
+
+  .iconsContainer {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+  }
+}

src/app/_blocks/IconRow/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import Image from 'next/image'
+
+import { Media as MediaType } from '../../../payload/payload-types'
+import { Gutter } from '../../_components/Gutter'
+import { Media } from '../../_components/Media'
+import RichText from '../../_components/RichText'
+
+import classes from './index.module.scss'
+
+export type Icon = {
+  iconTitle: string
+  iconImage: {
+    url?: string
+    media?: MediaType
+  }
+}
+
+export type IconRowProps = {
+  blockType?: 'iconRow'
+  blockName?: string
+  introContent?: any
+  subheading: string
+  icons?: Icon[]
+}
+
+export const IconRow: React.FC<IconRowProps> = ({ introContent, subheading, icons }) => {
+  return (
+    <div className={classes.iconRow}>
+      <Gutter>
+        {introContent && (
+          <Gutter className={classes.introContent}>
+            <RichText content={introContent} />
+          </Gutter>
+        )}
+        <h3>{subheading}</h3>
+        <div className={classes.iconsContainer}>
+          {icons.map((icon, index) => (
+            <div key={index} className={classes.icon}>
+              <Media resource={icon.iconImage.media ?? icon.iconImage.url} />
+              <p>{icon.iconTitle}</p>
+            </div>
+          ))}
+        </div>
+      </Gutter>
+    </div>
+  )
+}

src/app/_blocks/IconRowContainer/index.module.scss

@@ -0,0 +1,8 @@
+.iconRowContainer {
+  background-color: #e0e0e0; // example background color
+
+  h2 {
+    padding: 20px;
+    text-align: center;
+  }
+}

src/app/_blocks/IconRowContainer/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Gutter } from '../../_components/Gutter'
+import RichText from '../../_components/RichText'
+import { IconRow, IconRowProps } from '../IconRow'
+
+import classes from './index.module.scss'
+
+export type IconRowContainerProps = {
+  blockType?: 'iconRowContainer'
+  blockName?: string
+  introContent?: any
+  mainHeading?: string
+  rows?: IconRowProps[]
+}
+
+export const IconRowContainer: React.FC<IconRowContainerProps> = (props: IconRowContainerProps) => {
+  const { introContent, mainHeading, rows } = props
+  return (
+    <div className={classes.iconRowContainer}>
+      <Gutter>
+        {introContent && (
+          <Gutter className={classes.introContent}>
+            <RichText content={introContent} />
+          </Gutter>
+        )}
+        <h2>{mainHeading}</h2>
+        {rows.map((row, index) => (
+          <IconRow key={index} subheading={row.subheading} icons={row.icons} />
+        ))}
+      </Gutter>
+    </div>
+  )
+}

src/app/_components/Blocks/index.tsx

@@ -5,6 +5,8 @@ import { ArchiveBlock } from '../../_blocks/ArchiveBlock'
 import { CallToActionBlock } from '../../_blocks/CallToAction'
 import { CommentsBlock, type CommentsBlockProps } from '../../_blocks/Comments/index'
 import { ContentBlock } from '../../_blocks/Content'
+import { IconRow, IconRowProps } from '../../_blocks/IconRow'
+import { IconRowContainer, IconRowContainerProps } from '../../_blocks/IconRowContainer'
 import { MediaBlock } from '../../_blocks/MediaBlock'
 import { RelatedPosts, type RelatedPostsProps } from '../../_blocks/RelatedPosts'
 import { toKebabCase } from '../../_utilities/toKebabCase'
@@ -15,13 +17,21 @@ const blockComponents = {
   cta: CallToActionBlock,
   content: ContentBlock,
   mediaBlock: MediaBlock,
+  iconRow: IconRow,
+  iconRowContainer: IconRowContainer,
   archive: ArchiveBlock,
   relatedPosts: RelatedPosts,
   comments: CommentsBlock,
 }
 
 export const Blocks: React.FC<{
-  blocks: (Page['layout'][0] | RelatedPostsProps | CommentsBlockProps)[]
+  blocks: (
+    | Page['layout'][0]
+    | RelatedPostsProps
+    | CommentsBlockProps
+    | IconRowProps
+    | IconRowContainerProps
+  )[]
   disableTopPadding?: boolean
 }> = props => {
   const { disableTopPadding, blocks } = props

src/payload/blocks/IconRow/index.ts

@@ -0,0 +1,35 @@
+import type { Block } from 'payload/types'
+
+import richText from '../../fields/richText'
+
+export const IconRow: Block = {
+  slug: 'iconRow',
+  fields: [
+    richText({
+      name: 'introContent',
+      label: 'Intro Content',
+    }),
+    {
+      name: 'subheading',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'icons',
+      type: 'array',
+      fields: [
+        {
+          name: 'iconTitle',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'iconImage',
+          type: 'upload',
+          relationTo: 'media',
+          required: true,
+        },
+      ],
+    },
+  ],
+}

src/payload/blocks/IconRowContainer/index.ts

@@ -0,0 +1,24 @@
+import type { Block } from 'payload/types'
+
+import richText from '../../fields/richText'
+import { IconRow } from '../IconRow'
+
+export const IconRowContainer: Block = {
+  slug: 'iconRowContainer',
+  fields: [
+    richText({
+      name: 'introContent',
+      label: 'Intro Content',
+    }),
+    {
+      name: 'mainHeading',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'rows',
+      type: 'blocks',
+      blocks: [IconRow],
+    },
+  ],
+}

src/payload/collections/Pages/index.ts

@@ -5,6 +5,8 @@ import { adminsOrPublished } from '../../access/adminsOrPublished'
 import { Archive } from '../../blocks/ArchiveBlock'
 import { CallToAction } from '../../blocks/CallToAction'
 import { Content } from '../../blocks/Content'
+import { IconRow } from '../../blocks/IconRow'
+import { IconRowContainer } from '../../blocks/IconRowContainer'
 import { MediaBlock } from '../../blocks/MediaBlock'
 import { hero } from '../../fields/hero'
 import { slugField } from '../../fields/slug'
@@ -64,7 +66,7 @@ export const Pages: CollectionConfig = {
               name: 'layout',
               type: 'blocks',
               required: true,
-              blocks: [CallToAction, Content, MediaBlock, Archive],
+              blocks: [CallToAction, Content, IconRow, IconRowContainer, MediaBlock, Archive],
             },
           ],
         },

src/payload/collections/Posts/index.ts

@@ -5,6 +5,8 @@ import { adminsOrPublished } from '../../access/adminsOrPublished'
 import { Archive } from '../../blocks/ArchiveBlock'
 import { CallToAction } from '../../blocks/CallToAction'
 import { Content } from '../../blocks/Content'
+import { IconRow } from '../../blocks/IconRow'
+import { IconRowContainer } from '../../blocks/IconRowContainer'
 import { MediaBlock } from '../../blocks/MediaBlock'
 import { hero } from '../../fields/hero'
 import { slugField } from '../../fields/slug'
@@ -120,7 +122,7 @@ export const Posts: CollectionConfig = {
               name: 'layout',
               type: 'blocks',
               required: true,
-              blocks: [CallToAction, Content, MediaBlock, Archive],
+              blocks: [CallToAction, Content, IconRow, IconRowContainer, MediaBlock, Archive],
             },
             {
               name: 'enablePremiumContent',
@@ -133,7 +135,7 @@ export const Posts: CollectionConfig = {
               access: {
                 read: ({ req }) => req.user,
               },
-              blocks: [CallToAction, Content, MediaBlock, Archive],
+              blocks: [CallToAction, Content, IconRow, IconRowContainer, MediaBlock, Archive],
             },
           ],
         },

src/payload/collections/Projects/index.ts

@@ -5,6 +5,8 @@ import { adminsOrPublished } from '../../access/adminsOrPublished'
 import { Archive } from '../../blocks/ArchiveBlock'
 import { CallToAction } from '../../blocks/CallToAction'
 import { Content } from '../../blocks/Content'
+import { IconRow } from '../../blocks/IconRow'
+import { IconRowContainer } from '../../blocks/IconRowContainer'
 import { MediaBlock } from '../../blocks/MediaBlock'
 import { hero } from '../../fields/hero'
 import { slugField } from '../../fields/slug'
@@ -73,7 +75,7 @@ export const Projects: CollectionConfig = {
               name: 'layout',
               type: 'blocks',
               required: true,
-              blocks: [CallToAction, Content, MediaBlock, Archive],
+              blocks: [CallToAction, Content, IconRow, IconRowContainer, MediaBlock, Archive],
             },
           ],
         },