chore: add a ResponsiveImage component

1 files changed, 68 insertions, 0 deletions

diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
new file mode 100644
index 0000000..db2f5ab
--- /dev/null
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -0,0 +1,68 @@
+import Link from '@components/atoms/links/link';
+import Image, { ImageProps } from 'next/image';
+import { FC } from 'react';
+import styles from './responsive-image.module.scss';
+
+type ResponsiveImageProps = Omit<ImageProps, 'alt' | 'width' | 'height'> & {
+  /**
+   * An alternative text.
+   */
+  alt: string;
+  /**
+   * A figure caption.
+   */
+  caption?: string;
+  /**
+   * The image height.
+   */
+  height: number | string;
+  /**
+   * A link target.
+   */
+  target?: string;
+  /**
+   * The image width.
+   */
+  width: number | string;
+};
+
+/**
+ * ResponsiveImage component
+ *
+ * Render a responsive image wrapped in a figure element.
+ */
+const ResponsiveImage: FC<ResponsiveImageProps> = ({
+  alt,
+  caption,
+  layout,
+  objectFit,
+  target,
+  ...props
+}) => {
+  return (
+    <figure className={styles.wrapper}>
+      {target ? (
+        <Link href={target} classes={styles.link}>
+          <Image alt={alt} layout={layout || 'intrinsic'} {...props} />
+          {caption && (
+            <figcaption className={styles.caption}>{caption}</figcaption>
+          )}
+        </Link>
+      ) : (
+        <>
+          <Image
+            alt={alt}
+            layout={layout || 'intrinsic'}
+            objectFit={objectFit || 'contain'}
+            {...props}
+          />
+          {caption && (
+            <figcaption className={styles.caption}>{caption}</figcaption>
+          )}
+        </>
+      )}
+    </figure>
+  );
+};
+
+export default ResponsiveImage;