@web3auth/ui/dist/lib.cjs/packages/ui/src/components/Image.js

Ui modal for web3Auth

'use strict';

var React = require('react');
var ThemeContext = require('../context/ThemeContext.js');
var jsxRuntime = require('react/jsx-runtime');

function Image(props) {
  const {
    hoverImageId,
    darkHoverImageId,
    imageId,
    darkImageId,
    isButton = false,
    height = "auto",
    width = "auto",
    fallbackImageId,
    extension = "svg"
  } = props;
  const {
    isDark
  } = React.useContext(ThemeContext.ThemedContext);
  const imgName = isDark && darkImageId ? darkImageId : imageId;
  const hoverImgName = isDark && darkHoverImageId ? darkHoverImageId : hoverImageId;
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [/*#__PURE__*/jsxRuntime.jsx("img", {
      src: `https://images.web3auth.io/${imgName}.${extension}`,
      height: height,
      width: width,
      alt: imageId,
      className: "image-icon w3a--object-contain w3a--rounded",
      onError: ({
        currentTarget
      }) => {
        if (fallbackImageId) {
          // eslint-disable-next-line no-param-reassign
          currentTarget.onerror = null; // prevents looping
          // eslint-disable-next-line no-param-reassign
          currentTarget.src = `https://images.web3auth.io/${fallbackImageId}.svg`;
        }
      }
    }), isButton ? /*#__PURE__*/jsxRuntime.jsx("img", {
      src: `https://images.web3auth.io/${hoverImgName}.${extension}`,
      height: height,
      width: width,
      alt: hoverImageId,
      className: "hover-icon w3a--object-contain w3a--rounded"
    }) : null]
  });
}

module.exports = Image;