diff options
Diffstat (limited to 'src/components/molecules/images/responsive-image.tsx')
| -rw-r--r-- | src/components/molecules/images/responsive-image.tsx | 91 |
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> - ); -}; |
