chore: added grid blocks

package.json

@@ -29,6 +29,7 @@
     "@react-spring/web": "^9.7.3",
     "@vercel/analytics": "^1.1.2",
     "@vercel/speed-insights": "^1.0.9",
+    "classnames": "^2.5.1",
     "contentful": "^10.6.21",
     "next": "^14.1.0",
     "prisma": "^5.9.1",

schema.graphql

@@ -65,7 +65,6 @@ type ProjectRichtextEntries {
 
 type Project implements Entry {
   sys: Sys!
-  contentfulMetadata: ContentfulMetadata!
   title: String
   slug: String
   metaDescription: String
@@ -93,9 +92,10 @@ union ProjectBlocksItem =
   | FullScreenBlock
   | ProjectInfoBlock
   | TitleTextBlock
+  | GridBlock
   | TitlesWithSideParagraphsBlock
 
-type CarouselBlock {
+type CarouselBlock implements Entry {
   title: String
   carouselDescription: String
   colorCode: String
@@ -106,7 +106,7 @@ type FullScreenBlock {
   image: Asset
 }
 
-type ProjectInfoBlock {
+type ProjectInfoBlock implements Entry {
   title: String
   subtitle: String
   description: Richtext
@@ -116,16 +116,33 @@ type ProjectInfoBlock {
   skills: String
 }
 
-type TitleTextBlock {
+type TitleTextBlock implements Entry {
   title: String
   colorCode: String
   description: Richtext
 }
 
-type TitlesWithSideParagraphsBlock {
+type TitlesWithSideParagraphsBlock implements Entry {
   title1: String
   description1: String
   title2: String
   description2: String
   colorCode: String
 }
+
+type GridBlock implements Entry {
+  sys: Sys!
+  spacing: String
+  imagesCollection: GridBlockImagesCollection
+}
+
+type GridBlockImagesCollection {
+  total: Int!
+  skip: Int!
+  limit: Int!
+  items: [GridImages]!
+}
+
+type GridImages implements Entry {
+  imagesCollection: AssetCollection
+}

src/app/page.tsx

@@ -17,7 +17,6 @@ export default function Home() {
         <Hero />
 
         <ProjectsFilterContextProvider>
-          {/* @TODO Use a filter context to keep track of this and make Filterbar a client component */}
           <Filterbar />
 
           <Suspense fallback={<ProjectsListLoading />}>

src/components/Home/Projects/ProjectsListLoading.tsx

@@ -1,3 +1,38 @@
+const ProjectLoading = () => (
+  <div className="animate-pulse mb-20 lg:mb-24 last:mb-0 flex relative flex-col">
+    <div className="aspect-w-1 aspect-h-1 bg-gray-100"></div>
+    <div className="flex flex-col gap-8">
+      <div className="h-[550px] bg-slate-300 w-full" />
+
+      <div className="bg-slate-300 h-10" />
+    </div>
+
+    <div className="bg-slate-300 h-8 w-48 mt-4" />
+
+    <div className="flex flex-col gap-2 mt-4">
+      <div className="bg-slate-300 h-4 w-[80%]" />
+      <div className="bg-slate-300 h-4 w-full" />
+      <div className="bg-slate-300 h-4 w-[60%]" />
+    </div>
+  </div>
+);
+
 export const ProjectsListLoading = () => {
-  return <div>Loading...</div>;
+  return (
+    <div id="projects-container" className="bg-white">
+      <div className="min-h-[90vh] px-8 md:px-16 lg:px-32 xl:px-60 py-12 lg:py-24 gap-x-20 flex flex-col md:flex-row md:justify-between">
+        <div className="flex-1 flex flex-col mt-0">
+          {Array.from({ length: 2 }, () => null).map((_, i) => (
+            <ProjectLoading key={i} />
+          ))}
+        </div>
+
+        <div className="flex-1 flex flex-col mt-20 lg:mt-12">
+          {Array.from({ length: 2 }, () => null).map((_, i) => (
+            <ProjectLoading key={i} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 };

src/components/Project/Block/GridBlock/index.tsx

@@ -0,0 +1,62 @@
+import classnames from "classnames";
+import Image from "next/image";
+
+import {
+  BaseBlock,
+  GridBlock as IGridBlock,
+  GridBlockSpacing,
+  ProjectBlock,
+  ProjectBlockType,
+} from "@/types/global";
+
+export function blockIsGridBlock(
+  block: Partial<BaseBlock> | ProjectBlock
+): block is IGridBlock {
+  return block.type === ProjectBlockType.GRID_BLOCK;
+}
+
+interface FullScreenBlockProps {
+  block: IGridBlock;
+}
+
+export const GridBlock: React.FC<FullScreenBlockProps> = ({ block }) => (
+  <div
+    className={classnames("flex flex-col px-4 lg:px-24 mb-24", {
+      "gap-y-0.5": block.spacing === GridBlockSpacing.EXTRA_SMALL,
+      "gap-y-1": block.spacing === GridBlockSpacing.SMALL,
+      "gap-y-2": block.spacing === GridBlockSpacing.MEDIUM,
+      "gap-y-4": block.spacing === GridBlockSpacing.LARGE,
+      "gap-y-8": block.spacing === GridBlockSpacing.EXTRA_LARGE,
+      "gap-y-16": block.spacing === GridBlockSpacing.EXTRA_EXTRA_LARGE,
+    })}
+  >
+    {block.gridImages.map((gridImage, index) => (
+      <div
+        key={index}
+        className={classnames("flex flex-col lg:flex-row", {
+          "gap-0.5": block.spacing === GridBlockSpacing.EXTRA_SMALL,
+          "gap-1": block.spacing === GridBlockSpacing.SMALL,
+          "gap-2": block.spacing === GridBlockSpacing.MEDIUM,
+          "gap-4": block.spacing === GridBlockSpacing.LARGE,
+          "gap-8": block.spacing === GridBlockSpacing.EXTRA_LARGE,
+          "gap-16": block.spacing === GridBlockSpacing.EXTRA_EXTRA_LARGE,
+        })}
+      >
+        {gridImage.images.map((image, index) => (
+          <div key={index} className="relative w-full flex-1">
+            <Image
+              alt={image.description || ""}
+              src={image.url || ""}
+              loading="lazy"
+              width={image.details.width || 0}
+              height={image.details.height || 0}
+              style={{
+                objectFit: "cover",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);

src/components/Project/Block/ProjectInfoBlock.tsx

@@ -32,16 +32,12 @@ export const ProjectInfoBlock: React.FC<ProjectInfoBlockProps> = ({
   block,
 }) => {
   return (
-    <div className="project-section bg-white animate-pulse">
+    <div className="project-section bg-white">
       <div className="project-container flex flex-col">
         <h1 className="text-3xl lg:text-4xl font-medium mb-1">{block.title}</h1>
-        <span className="text-lg lg:text-xl font-light text-[#8C8C8C] mb-6">
-          {block.subtitle}
-        </span>
-
-        <div className="text-lg lg:text-xl font-light mb-8">
+        <span className="text-lg lg:text-xl font-light text-[#8C8C8C] mb-6 leading-snug">
           <RichText richtext={block.description} />
-        </div>
+        </span>
 
         <div className="flex flex-col">
           {block.info.team && <Line title="Team" value={block.info.team} />}

src/components/Project/Block/index.tsx

@@ -1,15 +1,8 @@
 import { BaseBlock, ProjectBlock } from "@/types/global";
 
 import { blockIsCarouselBlock, CarouselBlock } from "./CarouselBlock";
-import {
-  blockIsDescriptionAndPicsBlock,
-  DescriptionAndPicsBlock,
-} from "./DescriptionAndPicsBlock";
-import {
-  blockIsFourImagesWithTextBlock,
-  FourImagesWithTextBlock,
-} from "./FourImagesWithTextBlock";
 import { blockIsFullScreenBlock, FullScreenBlock } from "./FullScreenBlock";
+import { blockIsGridBlock, GridBlock } from "./GridBlock";
 import { blockIsProjectInfoBlock, ProjectInfoBlock } from "./ProjectInfoBlock";
 import {
   blockIsTitleAndTextBlock,
@@ -37,13 +30,9 @@ const Block: React.FC<BlockProps> = ({ block }) => {
     return <TitleAndTextBlock block={block} />;
   }
 
-  // if (blockIsDescriptionAndPicsBlock(block)) {
-  //   return <DescriptionAndPicsBlock block={block} />;
-  // }
-
-  // if (blockIsFourImagesWithTextBlock(block)) {
-  //   return <FourImagesWithTextBlock block={block} />;
-  // }
+  if (blockIsGridBlock(block)) {
+    return <GridBlock block={block} />;
+  }
 
   if (blockIsCarouselBlock(block)) {
     return <CarouselBlock block={block} />;

src/components/Project/ProjectLoading.tsx

@@ -8,7 +8,7 @@ const Line: React.FC = () => (
 
 export const ProjectLoading: React.FC = () => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col animate-pulse">
       <div className="px-6 md:px-16 lg:px-24">
         <div className="relative w-full aspect-square md:aspect-video rounded-xl bg-slate-300" />
       </div>

src/components/Richtext/Blocks.tsx

@@ -11,17 +11,17 @@ export const Text: React.FC<PropsWithChildren> = ({ children }) => {
     return null;
   }
 
-  return <p className="rich-text-copy mb-2">{children}</p>;
+  return <p className="mb-1">{children}</p>;
 };
 
 export const UnorderedList: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className="rich-text-copy">
+  <div>
     <ul className="list-disc ml-6 pl-3">{children}</ul>
   </div>
 );
 
 export const OrderedList: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className="rich-text-copy">
+  <div>
     <ol className="list-decimal ml-6 pl-3">{children}</ol>
   </div>
 );

src/components/Richtext/index.tsx

@@ -73,7 +73,7 @@ export const RichText: React.FC<{ richtext: RichTextType }> = ({
   };
 
   return (
-    <article className="flex flex-col gap-y-2 text-2xl break-words font-manrope">
+    <article className="flex flex-col gap-y-2 break-words font-manrope">
       {documentToReactComponents(richtext.json, options)}
     </article>
   );