qw-gallery-scenery/components/Photo.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react/prop-types */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import PropTypes from 'prop-types'
import Link from './Link'
const imgWithClick = { cursor: 'pointer' }

const Photo = ({ index, onClick, photo, margin, direction, top, left, key }:{ index:any, onClick:any, photo:any, margin:any, direction:any, top:any, left:any, key:any }) => {
  const imgStyle = ({ margin: margin, display: 'block' } as any)
  if (direction === 'column') {
    imgStyle.position = 'absolute'
    imgStyle.left = left
    imgStyle.top = top
  }

  const handleClick = (event: any) => {
    onClick(event, { photo, index })
  }

  return (
    <Link key={key} href={key} prefetch={false}>
      <img
        style={onClick ? { ...imgStyle, ...imgWithClick } : imgStyle}
        {...photo}
        onClick={onClick ? handleClick : null}
      />
    </Link>
  )
}

export const photoPropType = PropTypes.shape({
  key: PropTypes.string,
  src: PropTypes.string.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  alt: PropTypes.string,
  title: PropTypes.string,
  srcSet: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  sizes: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
})

Photo.propTypes = {
  index: PropTypes.number.isRequired,
  onClick: PropTypes.func,
  photo: photoPropType.isRequired,
  margin: PropTypes.number,
  top: (props:any) => {
    if (props.direction === 'column' && typeof props.top !== 'number') {
      return new Error('top is a required number when direction is set to `column`')
    }
  },
  left: (props:any) => {
    if (props.direction === 'column' && typeof props.left !== 'number') {
      return new Error('left is a required number when direction is set to `column`')
    }
  },
  direction: PropTypes.string,
}

export default Photo