refactor(components): replace items prop in Grid with children prop

It is easier to read and to maintain this way. The `items` prop was not
useful since we are not manipulating the items. Changes:
* extract GridItem component from Grid component
* replace `items` prop of type Array<ReactNode> with `children` prop of
type ReactNode
* remove GridItem styles

2 files changed, 64 insertions, 91 deletions

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 32c2e7f..b8f754b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,7 +15,6 @@ import {
   CardTitle,
   getLayout,
   Grid,
-  type GridItem,
   Icon,
   List,
   ListItem,
@@ -151,12 +150,11 @@ const LibreLinks: FC = () => {
  */
 const ShaarliLink: FC = () => {
   const intl = useIntl();
-  const shaarliUrl = PERSONAL_LINKS.SHAARLI;
 
   return (
     <List className={styles.list} hideMarker isInline spacing="sm">
       <ListItem>
-        <ButtonLink isExternal to={shaarliUrl}>
+        <ButtonLink isExternal to={PERSONAL_LINKS.SHAARLI}>
           {intl.formatMessage({
             defaultMessage: 'Shaarli',
             description: 'HomePage: link to Shaarli',
@@ -202,15 +200,10 @@ const MoreLinks: FC = () => {
   );
 };
 
-const StyledGrid = ({ children }: { children: ReactNode[] }) => (
-  <Grid
-    className={styles.columns}
-    gap="sm"
-    items={children.map((child, index) => {
-      return { id: `${index}`, item: child };
-    })}
-    sizeMin="250px"
-  />
+const StyledGrid = ({ children }: { children: ReactNode }) => (
+  <Grid className={styles.columns} gap="sm" sizeMin="250px">
+    {children}
+  </Grid>
 );
 
 /**
@@ -256,9 +249,11 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
    * @returns {JSX.Element} - The cards list.
    */
   const getRecentPosts = (): JSX.Element => {
-    const posts: GridItem[] = recentPosts.map((post) => {
-      return {
-        item: (
+    const listClass = `${styles.list} ${styles['list--cards']}`;
+
+    return (
+      <Grid className={listClass} gap="sm" isCentered sizeMax="25ch">
+        {recentPosts.map((post) => (
           <Card
             cover={
               post.cover ? (
@@ -270,6 +265,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
                 </CardCover>
               ) : undefined
             }
+            key={post.id}
             meta={
               <CardMeta isCentered>
                 <MetaItem
@@ -288,20 +284,8 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
             </CardHeader>
             <CardFooter />
           </Card>
-        ),
-        id: `${post.id}`,
-      };
-    });
-    const listClass = `${styles.list} ${styles['list--cards']}`;
-
-    return (
-      <Grid
-        className={listClass}
-        gap="sm"
-        isCentered
-        items={posts}
-        sizeMax="25ch"
-      />
+        ))}
+      </Grid>
     );
   };
 
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index fc6eb5f..00c5a70 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable max-statements */
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import NextImage from 'next/image';
@@ -14,7 +13,6 @@ import {
   CardTitle,
   getLayout,
   Grid,
-  type GridItem,
   MetaList,
   MetaItem,
   Page,
@@ -59,59 +57,6 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
     description: 'Meta: technologies label',
     id: 'ADQmDF',
   });
-
-  const items: GridItem[] = projects.map(
-    ({ id, meta: projectMeta, slug, title: projectTitle }) => {
-      const { cover, tagline, technologies } = projectMeta;
-      const figureLabel = intl.formatMessage(
-        {
-          defaultMessage: '{title} cover',
-          description: 'ProjectsPage: figure (cover) accessible name',
-          id: 'FdF33B',
-        },
-        { title: projectTitle }
-      );
-
-      return {
-        item: (
-          <Card
-            cover={
-              cover ? (
-                <CardCover aria-label={figureLabel} hasBorders>
-                  <NextImage {...cover} />
-                </CardCover>
-              ) : undefined
-            }
-            meta={
-              technologies ? (
-                <MetaList isCentered>
-                  <MetaItem
-                    hasBorderedValues
-                    hasInlinedValues
-                    isCentered
-                    label={metaLabel}
-                    value={technologies.map((techno) => {
-                      return { id: techno, value: techno };
-                    })}
-                  />
-                </MetaList>
-              ) : undefined
-            }
-            isCentered
-            linkTo={`${ROUTES.PROJECTS}/${slug}`}
-          >
-            <CardHeader>
-              <CardTitle>{projectTitle}</CardTitle>
-            </CardHeader>
-            <CardBody>{tagline}</CardBody>
-            <CardFooter />
-          </Card>
-        ),
-        id: `${id}`,
-      };
-    }
-  );
-
   const { asPath } = useRouter();
   const webpageSchema = getWebPageSchema({
     description: seo.description,
@@ -165,13 +110,57 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
         intro={<PageContent components={mdxComponents} />}
       />
       <PageBody className={styles.body}>
-        <Grid
-          className={styles.list}
-          gap="sm"
-          isCentered
-          items={items}
-          sizeMax="30ch"
-        />
+        <Grid className={styles.list} gap="sm" isCentered sizeMax="30ch">
+          {projects.map(
+            ({ id, meta: projectMeta, slug, title: projectTitle }) => {
+              const { cover, tagline, technologies } = projectMeta;
+              const figureLabel = intl.formatMessage(
+                {
+                  defaultMessage: '{title} cover',
+                  description: 'ProjectsPage: figure (cover) accessible name',
+                  id: 'FdF33B',
+                },
+                { title: projectTitle }
+              );
+
+              return (
+                <Card
+                  cover={
+                    cover ? (
+                      <CardCover aria-label={figureLabel} hasBorders>
+                        <NextImage {...cover} />
+                      </CardCover>
+                    ) : undefined
+                  }
+                  key={id}
+                  meta={
+                    technologies ? (
+                      <MetaList isCentered>
+                        <MetaItem
+                          hasBorderedValues
+                          hasInlinedValues
+                          isCentered
+                          label={metaLabel}
+                          value={technologies.map((techno) => {
+                            return { id: techno, value: techno };
+                          })}
+                        />
+                      </MetaList>
+                    ) : undefined
+                  }
+                  isCentered
+                  linkTo={`${ROUTES.PROJECTS}/${slug}`}
+                >
+                  <CardHeader>
+                    <CardTitle>{projectTitle}</CardTitle>
+                  </CardHeader>
+                  <CardBody>{tagline}</CardBody>
+                  <CardFooter />
+                </Card>
+              );
+            }
+          )}
+        </Grid>
       </PageBody>
     </Page>
   );