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, 9 insertions, 8 deletions

diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx
index bb319c4..8af58ec 100644
--- a/src/components/organisms/layout/overview.tsx
+++ b/src/components/organisms/layout/overview.tsx
@@ -1,10 +1,7 @@
+import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import type { FC } from 'react';
-import {
-  Meta,
-  type MetaData,
-  ResponsiveImage,
-  type ResponsiveImageProps,
-} from '../../molecules';
+import { Figure } from '../../atoms';
+import { Meta, type MetaData } from '../../molecules';
 import styles from './overview.module.scss';
 
 export type OverviewMeta = Pick<
@@ -25,7 +22,7 @@ export type OverviewProps = {
   /**
    * The overview cover.
    */
-  cover?: Pick<ResponsiveImageProps, 'alt' | 'src' | 'width' | 'height'>;
+  cover?: Pick<NextImageProps, 'alt' | 'src' | 'width' | 'height'>;
   /**
    * The overview meta.
    */
@@ -47,7 +44,11 @@ export const Overview: FC<OverviewProps> = ({
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
-      {cover ? <ResponsiveImage className={styles.cover} {...cover} /> : null}
+      {cover ? (
+        <Figure>
+          <NextImage {...cover} className={styles.cover} />
+        </Figure>
+      ) : null}
       <Meta
         className={`${styles.meta} ${metaModifier}`}
         data={{ ...remainingMeta, technologies }}