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, 46 insertions, 48 deletions

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 5a13e3e..6ed6eda 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -9,13 +9,14 @@ import {
   getLayout,
   Heading,
   LinksWidget,
-  type MetaItemData,
   Notice,
   PageLayout,
   PostsList,
   Pagination,
   type RenderPaginationLink,
   type RenderPaginationItemAriaLabel,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import {
   getArticles,
@@ -183,28 +184,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     [intl]
   );
 
-  const headerMeta: MetaItemData[] = totalArticles
-    ? [
-        {
-          id: 'posts-count',
-          label: intl.formatMessage({
-            defaultMessage: 'Total:',
-            description: 'Page: total label',
-            id: 'kNBXyK',
-          }),
-          value: intl.formatMessage(
-            {
-              defaultMessage:
-                '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-              description: 'Page: posts count meta',
-              id: 'RvGb2c',
-            },
-            { postsCount: totalArticles }
-          ),
-        },
-      ]
-    : [];
-
   const paginationAriaLabel = intl.formatMessage({
     defaultMessage: 'Pagination',
     description: 'BlogPage: pagination accessible name',
@@ -234,7 +213,27 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         title={title}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={headerMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Total:',
+                description: 'Page: total label',
+                id: 'kNBXyK',
+              })}
+              value={intl.formatMessage(
+                {
+                  defaultMessage:
+                    '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+                  description: 'Page: posts count meta',
+                  id: 'RvGb2c',
+                },
+                { postsCount: totalArticles }
+              )}
+            />
+          </MetaList>
+        }
         widgets={[
           <LinksWidget
             heading={
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index 03b641b..27d1816 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -10,12 +10,13 @@ import {
   getLayout,
   Heading,
   LinksWidget,
-  type MetaItemData,
   PageLayout,
   PostsList,
   Pagination,
   type RenderPaginationLink,
   type RenderPaginationItemAriaLabel,
+  MetaList,
+  MetaItem,
 } from '../../../components';
 import {
   getArticles,
@@ -187,28 +188,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     [intl]
   );
 
-  const headerMeta: MetaItemData[] = totalArticles
-    ? [
-        {
-          id: 'posts-count',
-          label: intl.formatMessage({
-            defaultMessage: 'Total:',
-            description: 'Page: total label',
-            id: 'kNBXyK',
-          }),
-          value: intl.formatMessage(
-            {
-              defaultMessage:
-                '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-              description: 'Page: posts count meta',
-              id: 'RvGb2c',
-            },
-            { postsCount: totalArticles }
-          ),
-        },
-      ]
-    : [];
-
   const paginationAriaLabel = intl.formatMessage({
     defaultMessage: 'Pagination',
     description: 'BlogPage: pagination accessible name',
@@ -238,7 +217,27 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         title={pageTitleWithPageNumber}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={headerMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Total:',
+                description: 'Page: total label',
+                id: 'kNBXyK',
+              })}
+              value={intl.formatMessage(
+                {
+                  defaultMessage:
+                    '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+                  description: 'Page: posts count meta',
+                  id: 'RvGb2c',
+                },
+                { postsCount: totalArticles }
+              )}
+            />
+          </MetaList>
+        }
         widgets={[
           <LinksWidget
             heading={