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.

1 files changed, 8 insertions, 1 deletions

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,