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/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.
  *