@shopgate/engage/page/widgets/Image/Image.js

Shopgate's ENGAGE library.

import React from 'react';
import { makeStyles } from '@shopgate/engage/styles';
import { Link, ConditionalWrapper } from '@shopgate/engage/components';
import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
import { useImageWidget } from "./hooks";
import { jsx as _jsx } from "react/jsx-runtime";
const useStyles = makeStyles()({
  link: {},
  image: {
    width: '100%'
  }
});
/**
 * The ImageWidget is used to display a image.
 * @returns {JSX.Element}
 */
const Image = () => {
  const {
    cx,
    classes
  } = useStyles();
  const {
    link,
    altText,
    url,
    borderRadius,
    parallax
  } = useImageWidget();
  if (!url) return null;
  return /*#__PURE__*/_jsx(ConditionalWrapper, {
    condition: !!link,
    wrapper: children => /*#__PURE__*/_jsx(Link, {
      href: link,
      className: cx(classes.link),
      children: children
    }),
    children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
      src: url,
      alt: altText,
      className: cx(classes.image),
      borderRadius: borderRadius,
      enableParallax: parallax
    })
  });
};
export default Image;