refactor(components): replace ResponsiveImage with Figure component

The styles applied to ResponsiveImage are related to the figure and
figcaption elements. Those elements could be use with other contents
than images. So I extracted them in a Figure component. The
ResponsiveImage component is no longer useful: the consumer should use
the Image component from `next` and wrap it in a link if needed.

5 files changed, 26 insertions, 10 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 523e21d..acb80b2 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -2,6 +2,7 @@
 import type { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import Head from 'next/head';
+import NextImage from 'next/image';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import type { HTMLAttributes } from 'react';
@@ -12,7 +13,6 @@ import {
   Link,
   PageLayout,
   type PageLayoutProps,
-  ResponsiveImage,
   Sharing,
   Spinner,
 } from '../../components';
@@ -108,7 +108,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
       label: footerMetaLabel,
       value: topics.map((topic) => (
         <ButtonLink className={styles.btn} key={topic.id} to={topic.url}>
-          {topic.logo ? <ResponsiveImage {...topic.logo} /> : null} {topic.name}
+          {topic.logo ? <NextImage {...topic.logo} /> : null} {topic.name}
         </ButtonLink>
       )),
     },
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1f1c9f3..d94160f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import type { MDXComponents } from 'mdx/types';
 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 { useIntl } from 'react-intl';
@@ -15,10 +16,10 @@ import {
   Icon,
   List,
   ListItem,
-  ResponsiveImage,
   Section,
   type SectionProps,
   Heading,
+  Figure,
 } from '../components';
 import HomePageContent from '../content/pages/homepage.mdx';
 import { getArticlesCard } from '../services/graphql';
@@ -83,6 +84,12 @@ const H6 = ({
   </Heading>
 );
 
+const ResponsiveImage = (props: NextImageProps) => (
+  <Figure>
+    <NextImage {...props} />
+  </Figure>
+);
+
 /**
  * Retrieve a list of coding links.
  *
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 9b0cc98..810d9ec 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -1,14 +1,15 @@
 import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 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 {
   getLayout,
   Link,
   PageLayout,
-  ResponsiveImage,
   type MetaData,
+  Figure,
 } from '../components';
 import LegalNoticeContent, { meta } from '../content/pages/legal-notice.mdx';
 import type { NextPageWithLayout } from '../types';
@@ -21,6 +22,12 @@ import {
 import { loadTranslation } from '../utils/helpers/server';
 import { useBreadcrumb, useSettings } from '../utils/hooks';
 
+const ResponsiveImage = (props: NextImageProps) => (
+  <Figure>
+    <NextImage {...props} />
+  </Figure>
+);
+
 const components: MDXComponents = {
   Image: ResponsiveImage,
   Link,
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index ee86c7b..0b94a4e 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -3,6 +3,7 @@ import type { MDXComponents } from 'mdx/types';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import dynamic from 'next/dynamic';
 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';
@@ -15,8 +16,6 @@ import {
   Overview,
   type OverviewMeta,
   PageLayout,
-  ResponsiveImage,
-  type ResponsiveImageProps,
   Sharing,
   SocialLink,
   Spinner,
@@ -24,6 +23,7 @@ import {
   Heading,
   List,
   ListItem,
+  Figure,
 } from '../../components';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
@@ -41,8 +41,10 @@ import {
 } from '../../utils/helpers/server';
 import { useBreadcrumb, useGithubApi, useSettings } from '../../utils/hooks';
 
-const BorderedImage = (props: ResponsiveImageProps) => (
-  <ResponsiveImage withBorders={true} {...props} />
+const BorderedImage = (props: NextImageProps) => (
+  <Figure hasBorders>
+    <NextImage {...props} />
+  </Figure>
 );
 
 const H1 = ({
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 8e3100f..899f9e1 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -2,6 +2,7 @@
 import type { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import Head from 'next/head';
+import NextImage from 'next/image';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useIntl } from 'react-intl';
@@ -11,7 +12,6 @@ import {
   LinksListWidget,
   PageLayout,
   PostsList,
-  ResponsiveImage,
   type MetaData,
 } from '../../components';
 import {
@@ -101,7 +101,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
 
   const getPageHeading = () => (
     <>
-      {cover ? <ResponsiveImage className={styles.logo} {...cover} /> : null}
+      {cover ? <NextImage {...cover} className={styles.logo} /> : null}
       {title}
     </>
   );