feat(components): add a generic Grid component

* merge Columns, Gallery and CardsList into Grid component
* add more options to control the grid

3 files changed, 56 insertions, 19 deletions

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e482fb4..7ff1379 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,7 +4,7 @@ import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import Script from 'next/script';
-import type { FC, HTMLAttributes } from 'react';
+import type { FC, HTMLAttributes, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import {
   ButtonLink,
@@ -14,13 +14,10 @@ import {
   CardHeader,
   CardMeta,
   CardTitle,
-  CardsList,
-  type CardsListItem,
-  Column,
-  Columns,
-  type ColumnsProps,
   Figure,
   getLayout,
+  Grid,
+  type GridItem,
   Heading,
   Icon,
   List,
@@ -38,6 +35,15 @@ import { getSchemaJson, getWebPageSchema } from '../utils/helpers';
 import { loadTranslation, type Messages } from '../utils/helpers/server';
 import { useBreadcrumb, useSettings } from '../utils/hooks';
 
+/**
+ * Column component.
+ *
+ * Render the body as a column.
+ */
+const Column = ({ children, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div {...props}>{children}</div>
+);
+
 const H1 = ({
   children = '',
   ...props
@@ -256,8 +262,15 @@ const MoreLinks: FC = () => {
   );
 };
 
-const StyledColumns = (props: ColumnsProps) => (
-  <Columns className={styles.columns} {...props} />
+const StyledGrid = ({ children }: { children: ReactNode[] }) => (
+  <Grid
+    className={styles.columns}
+    gap="sm"
+    items={children.map((child, index) => {
+      return { id: `${index}`, item: child };
+    })}
+    sizeMin="250px"
+  />
 );
 
 /**
@@ -303,9 +316,9 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
    * @returns {JSX.Element} - The cards list.
    */
   const getRecentPosts = (): JSX.Element => {
-    const posts: CardsListItem[] = recentPosts.map((post) => {
+    const posts: GridItem[] = recentPosts.map((post) => {
       return {
-        card: (
+        item: (
           <Card
             cover={
               post.cover ? (
@@ -345,14 +358,22 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
     });
     const listClass = `${styles.list} ${styles['list--cards']}`;
 
-    return <CardsList className={listClass} items={posts} />;
+    return (
+      <Grid
+        className={listClass}
+        gap="sm"
+        isCentered
+        items={posts}
+        sizeMax="25ch"
+      />
+    );
   };
 
   const components: MDXComponents = {
     CodingLinks,
     ColdarkRepos,
     Column,
-    Columns: StyledColumns,
+    Grid: StyledGrid,
     h1: H1,
     h2: H2,
     h3: H3,
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 3d3c57e..17be961 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -6,11 +6,10 @@ import Head from 'next/head';
 import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import type { ComponentType, HTMLAttributes } from 'react';
+import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import {
   Code,
-  Gallery,
   getLayout,
   Link,
   Overview,
@@ -25,6 +24,7 @@ import {
   type MetaItemData,
   type MetaValues,
   Time,
+  Grid,
 } from '../../components';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
@@ -120,6 +120,16 @@ const UnorderedList = ({
   </List>
 );
 
+const Gallery = ({ children }: { children: ReactNode[] }) => (
+  <Grid
+    gap="sm"
+    items={children.map((child, index) => {
+      return { id: `${index}`, item: child };
+    })}
+    sizeMin="250px"
+  />
+);
+
 const components: MDXComponents = {
   Code,
   Gallery,
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index abb6da0..6ae476e 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -13,9 +13,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  CardsList,
-  type CardsListItem,
   getLayout,
+  Grid,
+  type GridItem,
   Link,
   MetaList,
   PageLayout,
@@ -61,7 +61,7 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
     id: 'ADQmDF',
   });
 
-  const items: CardsListItem[] = projects.map(
+  const items: GridItem[] = projects.map(
     ({ id, meta: projectMeta, slug, title: projectTitle }) => {
       const { cover, tagline, technologies } = projectMeta;
       const figureLabel = intl.formatMessage(
@@ -74,7 +74,7 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
       );
 
       return {
-        card: (
+        item: (
           <Card
             cover={
               cover ? (
@@ -165,7 +165,13 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
       >
-        <CardsList className={styles.list} items={items} />
+        <Grid
+          className={styles.list}
+          gap="sm"
+          isCentered
+          items={items}
+          sizeMax="30ch"
+        />
       </PageLayout>
     </>
   );