Slideshow

import { Slide } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
import styled from "styled-components";

export default function SlideShow({
  padding,
  margin,
  className,
  backgroundColor,
  itemHeight,
  itemPadding = "80px",
  children,
  arrowPrev,
  arrowNext,
  arrowPadding = "20px",
  indicatorView,
  isShowIndicators = true,
  responsiveSettings,
  defaultArrowWidth = "20px",
  defaultArrowColor = "#aaa",
  defaultIndicatorColor = "#ddd",
  defaultIndicatorActiveColor = "#888",
  autoplay = true,
}) {
  const responsiveDefaultSettings = [
    {
      breakpoint: 800,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      },
    },
    {
      breakpoint: 500,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      },
    },
  ];

  const properties = {
    prevArrow: (
      <div className="wrp-arrow">
        {arrowPrev ? (
          <div className="wrp-arrow-btn">{arrowPrev}</div>
        ) : (
          <svg
            className="default-arrow-prev"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 192 336"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M184.971 7.02944C194.343 16.402 194.343 31.598 184.971 40.9706L57.9411 168L184.971 295.029C194.343 304.402 194.343 319.598 184.971 328.971C175.598 338.343 160.402 338.343 151.029 328.971L7.02944 184.971C-2.34315 175.598 -2.34315 160.402 7.02944 151.029L151.029 7.02944C160.402 -2.34315 175.598 -2.34315 184.971 7.02944Z"
              fill="black"
            />
          </svg>
        )}
      </div>
    ),
    nextArrow: (
      <div className="wrp-arrow">
        {arrowNext ? (
          <div className="wrp-arrow-btn">{arrowNext}</div>
        ) : (
          <svg
            className="default-arrow-next"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 192 336"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M7.02943 328.971C-2.34314 319.598 -2.34314 304.402 7.02944 295.029L134.059 168L7.02946 40.9705C-2.34311 31.598 -2.34311 16.402 7.02946 7.02943C16.4021 -2.34315 31.598 -2.34315 40.9706 7.02944L184.971 151.029C194.343 160.402 194.343 175.598 184.971 184.971L40.9706 328.971C31.598 338.343 16.402 338.343 7.02943 328.971Z"
              fill="black"
            />
          </svg>
        )}
      </div>
    ),
  };

  const indicators = () => <div className="indicator"></div>;
  const customIndicators = () => indicatorView;

  return (
    <Styled
      className={className}
      $defaultArrowWidth={defaultArrowWidth}
      $defaultArrowColor={defaultArrowColor}
      $padding={padding}
      $margin={margin}
      $backgroundColor={backgroundColor}
      $itemPadding={itemPadding}
      $itemHeight={itemHeight}
      $arrowPadding={arrowPadding}
      $defaultIndicatorColor={defaultIndicatorColor}
      $defaultIndicatorActiveColor={defaultIndicatorActiveColor}
    >
      <Slide
        autoplay={autoplay}
        responsive={
          responsiveSettings ? responsiveSettings : responsiveDefaultSettings
        }
        indicators={
          indicatorView
            ? customIndicators
            : isShowIndicators
            ? indicators
            : null
        }
        {...properties}
      >
        {children}
      </Slide>
    </Styled>
  );
}
const Styled = styled.div`
  position: relative;
  background-color: ${({ $backgroundColor }) => $backgroundColor};
  padding: ${({ $padding }) => $padding};
  margin: ${({ $margin }) => $margin};

  .indicators {
    display: flex;
    align-items: center;
    .indicator {
      width: 8px;
      height: 8px;
      background-color: ${({ $defaultIndicatorColor }) => $defaultIndicatorColor};
      margin-right: 8px;
      cursor: pointer;
      border-radius: 100%;
    }
    .indicator.active {
      width: 8px;
      height: 8px;
      background-color: ${({ $defaultIndicatorActiveColor }) =>
        $defaultIndicatorActiveColor};
    }
  }

  .wrp-arrow {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: ${({ $arrowPadding }) => $arrowPadding};
    .default-arrow-prev,
    .default-arrow-next {
      background-color: transparent;
      display: block;
      width: ${({ $defaultArrowWidth }) => $defaultArrowWidth};
      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
      path {
        fill: ${({ $defaultArrowColor }) => $defaultArrowColor};
      }
    }
  }
  .react-slideshow-container .nav:first-of-type {
    left: inherit;
    position: relative;
  }
  .react-slideshow-container .nav:last-of-type {
    left: inherit;
    position: relative;
  }

  .react-slideshow-wrapper.slide {
    width: inherit;
    flex: 1;
  }
`;

import SlideShow from "../../example/SlideShow";

export default function TestView() {
  return (
    <div className="test-view">
      <SlideShow
        autoplay={false}
        responsiveSettings={[
          {
            breakpoint: 800,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
            },
          },
          {
            breakpoint: 100,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            },
          },
        ]}
      >
        {[1, 2, 3, 4, 5, 6]?.map((item, index) => (
          <div
            style={{
              background: "#444",
              width: "100%",
              height: "200px",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              fontSize: "50px",
            }}
            className="item"
            key={"item-" + index}
          >
            {item}
          </div>
        ))}
      </SlideShow>
    </div>
  );
}