feat: add further blocks

payload-types.ts

@@ -113,6 +113,31 @@ export interface Page {
   };
   layout?:
     | (
+        | {
+            about?:
+              | {
+                  date?: string | null;
+                  position?: string | null;
+                  company?: string | null;
+                  stacks?:
+                    | {
+                        stack?: string | null;
+                        id?: string | null;
+                      }[]
+                    | null;
+                  responsibilities?:
+                    | {
+                        responsibility?: string | null;
+                        id?: string | null;
+                      }[]
+                    | null;
+                  id?: string | null;
+                }[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'about-block';
+          }
         | {
             accolade?:
               | {
@@ -289,43 +314,16 @@ export interface Project {
         blockType: 'content-block';
       }[]
     | null;
-  slug?: string | null;
   typeface?:
     | {
-        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;
-        } | null;
-        id?: string | null;
-        blockName?: string | null;
-        blockType: 'content-block';
-      }[]
-    | null;
-  layout?:
-    | {
-        title?: string | null;
-        items?:
-          | {
-              item?: string | null;
-              id?: string | null;
-            }[]
-          | null;
+        typeface?: string | null;
+        image?: (string | null) | Media;
         id?: string | null;
         blockName?: string | null;
-        blockType: 'list-block';
+        blockType: 'typeface';
       }[]
     | null;
+  slug?: string | null;
   showcase?:
     | {
         images?:
@@ -443,6 +441,32 @@ export interface PagesSelect<T extends boolean = true> {
   layout?:
     | T
     | {
+        'about-block'?:
+          | T
+          | {
+              about?:
+                | T
+                | {
+                    date?: T;
+                    position?: T;
+                    company?: T;
+                    stacks?:
+                      | T
+                      | {
+                          stack?: T;
+                          id?: T;
+                        };
+                    responsibilities?:
+                      | T
+                      | {
+                          responsibility?: T;
+                          id?: T;
+                        };
+                    id?: T;
+                  };
+              id?: T;
+              blockName?: T;
+            };
         'accolades-block'?:
           | T
           | {
@@ -558,35 +582,19 @@ export interface ProjectsSelect<T extends boolean = true> {
               blockName?: T;
             };
       };
-  slug?: T;
   typeface?:
     | T
     | {
-        'content-block'?:
-          | T
-          | {
-              Content?: T;
-              id?: T;
-              blockName?: T;
-            };
-      };
-  layout?:
-    | T
-    | {
-        'list-block'?:
+        typeface?:
           | T
           | {
-              title?: T;
-              items?:
-                | T
-                | {
-                    item?: T;
-                    id?: T;
-                  };
+              typeface?: T;
+              image?: T;
               id?: T;
               blockName?: T;
             };
       };
+  slug?: T;
   showcase?:
     | T
     | {

src/app/(frontend)/about/page.tsx

@@ -1,34 +1,38 @@
 import { Metadata } from 'next';
-import config from '@payload-config';
 import React from 'react';
 import { getPayload } from 'payload';
+import { RichText } from '@/src/components/typography';
+import configPromise from '@payload-config';
+import { AboutBlock } from '@/src/components/blocks';
 
 export const metadata: Metadata = {
   description: 'About Aman Singh Bhogal',
   title: 'About | Aman Singh Bhogal',
 };
 
 export default async function Page() {
-  // const { about: aboutData } = await getAboutData();
-
   const payload = await getPayload({
-    config,
+    config: configPromise,
+  });
+
+  const data = await payload.find({
+    collection: 'pages',
+    where: {
+      title: {
+        equals: 'About',
+      },
+    },
   });
 
-  const data = await payload
-    .find({
-      collection: 'pages',
-    })
-    .then((results) => results.docs[2]);
+  const { docs } = data;
 
-  // eslint-disable-next-line no-console
-  console.log(data);
   return (
-    <React.Fragment>
-      <p>About</p>
-      {/*  <AboutCover />
-      <AboutSection aboutData={aboutData} />
-      <CTA /> */}
-    </React.Fragment>
+    <div>
+      <h1>{docs[0].title}</h1>
+      {/* @ts-expect-error resolve type mismatch */}
+      <RichText content={docs[0]?.layout?.[0].Content || []} />
+      {/* @ts-expect-error resolve type mismatch */}
+      <AboutBlock history={docs[0]?.layout?.[1].about} />
+    </div>
   );
 }

src/app/(frontend)/work/[slug]/page.tsx

@@ -2,8 +2,9 @@ import { getPayload, PaginatedDocs } from 'payload';
 import configPromise from '@payload-config';
 import { Metadata, ResolvingMetadata } from 'next';
 import Image from 'next/image';
-import { ListBlock } from '@/src/components/blocks';
+import { ListBlock, ProjectShowcaseBlock, TypefaceBlock } from '@/src/components/blocks';
 import { RichText } from '@/src/components/typography';
+import { ArrowDown } from '@/src/components/graphics';
 import styles from './styles.module.scss';
 
 interface Props {
@@ -49,21 +50,29 @@ export default async function Page({ params }: Props) {
     },
   });
 
+  const { docs } = data;
+
   return (
     <div>
       <div className={styles.imageContainer}>
         <Image
           className={styles.image}
-          width={data.docs[0].heroImage.width as number}
-          height={data.docs[0].heroImage.height as number}
-          src={data.docs[0].heroImage.url as string}
-          alt={data.docs[0].heroImage.altText as string}
+          width={docs[0].heroImage.width as number}
+          height={docs[0].heroImage.height as number}
+          src={docs[0].heroImage.url as string}
+          alt={docs[0].heroImage.altText as string}
           priority
         />
       </div>
-      <h1 className={styles.title}>{data.docs[0].title}</h1>
-      <ListBlock stacks={data.docs[0].stacks} />
-      <RichText content={data.docs[0].description.Content} />
+      <h1 className={styles.title}>{docs[0].title}</h1>
+      <ListBlock
+        className={styles.stacksList}
+        stacks={docs[0].stacks}
+      />
+      <RichText content={docs[0].description[0].Content} />
+      <ArrowDown className={styles.arrowDown} />
+      <TypefaceBlock typeface={docs[0].typeface} />
+      <ProjectShowcaseBlock images={docs[0].showcase} />
     </div>
   );
 }

src/app/(frontend)/work/[slug]/styles.module.scss

@@ -12,4 +12,22 @@
 
 .title {
   text-align: center;
+}
+
+.stacksList {
+  margin-bottom: 4.6875rem;
+
+  @media only screen and (width <=48rem) {
+    margin-bottom: 1.25rem;
+  }
+}
+
+.arrowDown {
+  height: 22.25rem;
+  margin: 0 auto;
+  width: 100%;
+
+  @media only screen and (width <=48rem) {
+    height: 9.375rem;
+  }
 }

src/app/(frontend)/work/[slug]/styles.module.scss.d.ts

@@ -1,3 +1,5 @@
+export declare const arrowDown: string;
 export declare const image: string;
 export declare const imageContainer: string;
+export declare const stacksList: string;
 export declare const title: string;

src/components/blocks/AboutBlock/index.tsx

@@ -0,0 +1,51 @@
+import { Page } from '@/payload-types';
+import dayjs from 'dayjs';
+import styles from './styles.module.scss';
+
+type AboutBlock = Extract<NonNullable<Page['layout']>[number], { blockType: 'about-block' }>;
+
+interface Props {
+  history: AboutBlock['about'];
+}
+
+export const AboutBlock = ({ history }: Props) => (
+  <ul className={styles.containerOuter}>
+    {history?.map((event) => (
+      <li
+        className={styles.container}
+        key={event.id}
+      >
+        <div className={styles.containerInner}>
+          <p className={styles.date}>{dayjs(event.date).format('MMM YYYY')}</p>
+          <p className={styles.position}>
+            {event.position}
+          </p>
+          <p className={styles.company}>{event.company}</p>
+        </div>
+        <div className={styles.containerInner}>
+          <ul className={styles.stacks}>
+            {event?.stacks?.map((stack) => (
+              <li
+                className={styles.stack}
+                key={stack.id}
+              >
+                {stack.stack}
+              </li>
+            ))}
+          </ul>
+          <ul className={styles.responsibilities}>
+            {event?.responsibilities?.map((responsibility) => (
+              <li
+                className={styles.responsibility}
+                key={responsibility.id}
+              >
+                {responsibility.responsibility}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+      </li>
+    ))}
+  </ul>
+);