refactor(components): replace Meta component with MetaList

It removes items complexity by allowing consumers to use any label/value
association. Translations should also be defined by the consumer.
Each item can now be configured separately (borders, layout...).

1 files changed, 19 insertions, 1 deletions

diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 97963dd..44354ce 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -1,8 +1,10 @@
+/* eslint-disable max-statements */
 import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
+import { useIntl } from 'react-intl';
 import {
   CardsList,
   type CardsListItem,
@@ -44,6 +46,12 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
     title,
     url: ROUTES.PROJECTS,
   });
+  const intl = useIntl();
+  const metaLabel = intl.formatMessage({
+    defaultMessage: 'Technologies:',
+    description: 'Meta: technologies label',
+    id: 'ADQmDF',
+  });
 
   const items: CardsListItem[] = projects.map(
     ({ id, meta: projectMeta, slug, title: projectTitle }) => {
@@ -52,7 +60,17 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
       return {
         cover,
         id: id as string,
-        meta: { technologies },
+        meta: technologies?.length
+          ? [
+              {
+                id: 'technologies',
+                label: metaLabel,
+                value: technologies.map((techno) => {
+                  return { id: techno, value: techno };
+                }),
+              },
+            ]
+          : [],
         tagline,
         title: projectTitle,
         url: `${ROUTES.PROJECTS}/${slug}`,