aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/images/responsive-image.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/images/responsive-image.tsx')
-rw-r--r--src/components/molecules/images/responsive-image.tsx91
1 files changed, 0 insertions, 91 deletions
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
deleted file mode 100644
index 85c0c46..0000000
--- a/src/components/molecules/images/responsive-image.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import Image, { type ImageProps } from 'next/image';
-import { FC, ReactNode } from 'react';
-import { Link, type LinkProps } from '../../atoms';
-import styles from './responsive-image.module.scss';
-
-export type ResponsiveImageProps = Omit<
- ImageProps,
- 'alt' | 'width' | 'height'
-> & {
- /**
- * An alternative text.
- */
- alt: string;
- /**
- * A figure caption.
- */
- caption?: ReactNode;
- /**
- * Set additional classnames to the figure wrapper.
- */
- className?: string;
- /**
- * The image height.
- */
- height: number | `${number}`;
- /**
- * A link target.
- */
- target?: LinkProps['href'];
- /**
- * The image width.
- */
- width: number | `${number}`;
- /**
- * Wrap the image with borders.
- */
- withBorders?: boolean;
-};
-
-/**
- * ResponsiveImage component
- *
- * Render a responsive image wrapped in a figure element.
- */
-export const ResponsiveImage: FC<ResponsiveImageProps> = ({
- alt,
- caption,
- className = '',
- target,
- title,
- withBorders,
- ...props
-}) => {
- const bordersModifier = withBorders ? styles['wrapper--has-borders'] : '';
- const linkModifier = target
- ? styles['wrapper--has-link']
- : styles['wrapper--no-link'];
- const figureClass = `${styles.wrapper} ${bordersModifier} ${linkModifier} ${className}`;
-
- return (
- <figure aria-label={caption ? undefined : title} className={figureClass}>
- {target ? (
- <Link href={target} className={styles.link}>
- <Image
- {...props}
- alt={alt}
- className={styles.img}
- sizes="100vw"
- title={title}
- />
- {caption && (
- <figcaption className={styles.caption}>{caption}</figcaption>
- )}
- </Link>
- ) : (
- <>
- <Image
- {...props}
- alt={alt}
- className={styles.img}
- sizes="100vw"
- title={title}
- />
- {caption && (
- <figcaption className={styles.caption}>{caption}</figcaption>
- )}
- </>
- )}
- </figure>
- );
-};