refactor(components): extract MetaItem from MetaList

* replace `items` prop on MetaList with `children` prop: it was too
restrictive and the global options was not really useful. It is better
too give control to the consumers.

2 files changed, 38 insertions, 42 deletions

diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 1aa9e7f..a8a4fea 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -19,12 +19,13 @@ import {
   List,
   ListItem,
   Figure,
-  type MetaItemData,
   Time,
   Grid,
   ProjectOverview,
   type ProjectMeta,
   type Repository,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
@@ -177,32 +178,6 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
     url: `${CONFIG.url}${asPath}`,
   };
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'ProjectsPage: publication date label',
-        id: 'HxZvY4',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update && dates.update !== dates.publication
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'ProjectsPage: update date label',
-            id: 'wQrvgw',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-  ];
-  const filteredHeaderMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
   /**
    * Retrieve the project repositories.
    *
@@ -319,7 +294,30 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
         intro={intro}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={filteredHeaderMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Published on:',
+                description: 'Page: publication date label',
+                id: '4QbTDq',
+              })}
+              value={<Time date={dates.publication} />}
+            />
+            {dates.update ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Updated on:',
+                  description: 'Page: update date label',
+                  id: 'Ez8Qim',
+                })}
+                value={<Time date={dates.update} />}
+              />
+            ) : null}
+          </MetaList>
+        }
         withToC={true}
         widgets={[
           <SharingWidget
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 97b43e3..8feb701 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -19,6 +19,7 @@ import {
   Link,
   MetaList,
   PageLayout,
+  MetaItem,
 } from '../../components';
 import PageContent, { meta } from '../../content/pages/projects.mdx';
 import styles from '../../styles/pages/projects.module.scss';
@@ -86,20 +87,17 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
             }
             meta={
               technologies ? (
-                <MetaList
-                  hasBorderedValues
-                  hasInlinedValues
-                  isCentered
-                  items={[
-                    {
-                      id: 'technologies',
-                      label: metaLabel,
-                      value: technologies.map((techno) => {
-                        return { id: techno, value: techno };
-                      }),
-                    },
-                  ]}
-                />
+                <MetaList isCentered>
+                  <MetaItem
+                    hasBorderedValues
+                    hasInlinedValues
+                    isCentered
+                    label={metaLabel}
+                    value={technologies.map((techno) => {
+                      return { id: techno, value: techno };
+                    })}
+                  />
+                </MetaList>
               ) : undefined
             }
             isCentered