www.armandphilippot.com - The frontend of my personal website.

diff options

Diffstat (limited to 'public/projects')

0 files changed, 0 insertions, 0 deletions

'#n48'>48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

import Link, { type LinkProps } from '@components/atoms/links/link';
import Image, { type ImageProps } from 'next/image';
import { FC, ReactNode } from 'react';
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 | string;
  /**
   * A link target.
   */
  target?: LinkProps['href'];
  /**
   * The image width.
   */
  width: number | string;
  /**
   * Wrap the image with borders.
   */
  withBorders?: boolean;
};

/**
 * ResponsiveImage component
 *
 * Render a responsive image wrapped in a figure element.
 */
const ResponsiveImage: FC<ResponsiveImageProps> = ({
  alt,
  caption,
  className = '',
  layout,
  objectFit,
  target,
  title,
  withBorders,
  ...props
}) => {
  const bordersModifier = withBorders
    ? 'wrapper--has-borders'
    : 'wrapper--no-borders';
  const linkModifier = target ? 'wrapper--has-link' : 'wrapper--no-link';

  return (
    <figure
      aria-label={caption ? undefined : title}
      className={`${styles.wrapper} ${styles[bordersModifier]} ${styles[linkModifier]} ${className}`}
    >
      {target ? (
        <Link href={target} className={styles.link}>
          <Image
            alt={alt}
            className={styles.img}
            layout={layout || 'intrinsic'}
            objectFit={objectFit || 'contain'}
            title={title}
            {...props}
          />
          {caption && (
            <figcaption className={styles.caption}>{caption}</figcaption>
          )}
        </Link>
      ) : (
        <>
          <Image
            alt={alt}
            className={styles.img}
            layout={layout || 'intrinsic'}
            objectFit={objectFit || 'contain'}
            title={title}
            {...props}
          />
          {caption && (
            <figcaption className={styles.caption}>{caption}</figcaption>
          )}
        </>
      )}
    </figure>
  );
};

export default ResponsiveImage;


context:
space:
mode: