PreviewImage | NextJS, MUI 5

PreviewImage.jsx

import PropTypes from 'prop-types';
import Link from 'next/link';
import { Box } from '@mui/material';

/**
 * @returns {number} - Image padding bottom
 */
const getImagePaddingBottom = (width = 0, height = 0) => 100 * (height / width);

const PreviewImage = ({ link, src, width, height, alt }) => {
  const paddingBottom = getImagePaddingBottom(width, height);

  const imageMaxHeight = 512;
  const maxHeight = height > imageMaxHeight ? imageMaxHeight : height;

  return (
    <Box
      sx={{
        position: 'relative',
        maxHeight,
      }}
    >
      <Box
        sx={{
          paddingBottom: `${paddingBottom}%`,
        }}
      >
        <Box
          sx={{
            position: 'absolute',
            inset: 0,
          }}
        >
          <Link href={link}>
            <Box
              sx={{
                maxHeight: imageMaxHeight,
                margin: '0 auto',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              <Box
                component="img"
                src={src}
                alt={alt}
                sx={{
                  display: 'block',
                  maxWidth: '100%',
                  maxHeight: imageMaxHeight,
                }}
              />
            </Box>
          </Link>
        </Box>
      </Box>
    </Box>
  );
};

PreviewImage.propTypes = {
  link: PropTypes.string.isRequired,
  src: PropTypes.string.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  alt: PropTypes.string.isRequired,
};

export default PreviewImage;