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

Shopgate's ENGAGE library.

import React from 'react';
import { makeStyles } from '@shopgate/engage/styles';
import { Swiper, Link, ConditionalWrapper } from '@shopgate/engage/components';
import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
import { useImageSliderWidget } from "./hooks";
import { jsx as _jsx } from "react/jsx-runtime";
const useStyles = makeStyles()({
  image: {
    width: '100%',
    minHeight: 1
  }
});

/**
 * The ImageSliderWidget is used to display an image slider.
 * @returns {JSX.Element}
 */
const ImageSliderWidget = () => {
  const {
    slides,
    swiperProps,
    borderRadius
  } = useImageSliderWidget();
  const {
    classes
  } = useStyles();
  if (slides.length === 0) {
    return null;
  }
  return /*#__PURE__*/_jsx(Swiper, {
    indicators: true,
    ...swiperProps,
    children: slides.map(slide => {
      if (!slide.image.url) {
        return null;
      }
      return /*#__PURE__*/_jsx(Swiper.Item, {
        children: /*#__PURE__*/_jsx(ConditionalWrapper, {
          condition: !!slide.link,
          wrapper: children => /*#__PURE__*/_jsx(Link, {
            href: slide.link,
            children: children
          }),
          children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
            className: classes.image,
            src: slide.image.url,
            alt: slide.image.altText || '',
            borderRadius: borderRadius
          })
        })
      }, slide.image.url);
    })
  });
};
export default ImageSliderWidget;