PointImage.jsx

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Box, CardMedia, Modal, Typography } from '@mui/material';
import { alpha, useTheme } from '@mui/material/styles';

function PointImage({ data, sx }) {
  const theme = useTheme();
  const [fullScreenImg, setFullScreenImg] = useState(null);
  const renderImages = () => {
    const images = [];

    function isImgUrl(string) {
      // Handle data URIs
      if (/^data:image\//.test(string)) {
        return true;
      }

      let url;
      try {
        url = new URL(string);
      } catch (_) {
        return false;
      }
      if (url) {
        const pathname = url.pathname.split('?')[0].split('#')[0];
        return /\.(jpg|jpeg|png|webp|gif|svg|bmp|ico|tiff|tif|avif|heic|heif)$/i.test(pathname);
      }
      return false;
    }

    // Loop through the object's properties
    for (const key in data) {
      if (typeof data[key] == 'string') {
        // Check if the value is an image URL
        if (isImgUrl(data[key])) {
          images.push(
            <Box
              key={key}
              sx={{
                py: 1,
                px: 0.5,
                ml: 5,
              }}
            >
              <CardMedia
                component="img"
                sx={{
                  width: '120px',
                  height: '120px',
                  aspectRatio: '1/1',
                  wordWrap: 'break-word',
                  border: `1px solid ${theme.palette.divider}`,
                  borderRadius: '5px',
                  ...sx,
                }}
                image={data[key]}
                alt={data[key]}
                onClick={() => setFullScreenImg(data[key])}
              />
            </Box>
          );
        }
      }
    }

    return images;
  };

  const images = renderImages();

  if (images.length === 0) {
    return null;
  }

  return (
    <Box>
      {images}
      <Modal
        open={!!fullScreenImg}
        onClose={() => setFullScreenImg(null)}
        slotProps={{
          backdrop: {
            sx: { cursor: 'pointer' },
            title: 'Click to close',
          },
        }}
      >
        <Box
          sx={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%,-50%)',
            maxWidth: '100%',
            maxHeight: '100%',
            '&:focus': { outline: 'none' },
          }}
        >
          <Typography
            variant="h6"
            component="p"
            onClick={() => setFullScreenImg(null)}
            sx={{
              position: 'absolute',
              top: '-60px',
              right: 0,
              padding: 1,
              cursor: 'pointer',
              color: theme.palette.common.white,
              backgroundColor: alpha(theme.palette.common.black, 0.5),
              borderRadius: '5px',
            }}
          >
            Close [ESC]
          </Typography>
          <img
            src={fullScreenImg}
            alt={fullScreenImg}
            style={{
              maxWidth: '100%',
              maxHeight: '100%',
            }}
          />
        </Box>
      </Modal>
    </Box>
  );
}
PointImage.propTypes = {
  data: PropTypes.object.isRequired,
  sx: PropTypes.object,
  xs: PropTypes.number, // Size of the image grid item. Default is 3.
};

export default PointImage;