Gwk-Cultural-Park/components/CardContentSlides.tsx

import 'react-multi-carousel/lib/styles.css'

import { height } from 'components/OpenGraphImage'
import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import Carousel from 'react-multi-carousel'
//import { Carousel } from '@material-tailwind/react'

const CardContentSlides = (props) => {
  return (
    <div className="">
      <div className="container sm:mb-5">
        <div className="row g-0 ">
          <div className="col-12">
            <div className="">
              <Carousel
                additionalTransfrom={0}
                arrows
                autoPlaySpeed={3000}
                centerMode={false}
                className=""
                containerClass="container-with-dots"
                dotListClass=""
                draggable
                focusOnSelect={false}
                infinite
                itemClass=""
                keyBoardControl
                minimumTouchDrag={80}
                pauseOnHover
                renderArrowsWhenDisabled={false}
                renderButtonGroupOutside={false}
                renderDotsOutside={false}
                responsive={(function () {
                  if (props.data.responsive != null) {
                    return props.data.responsive
                  } else {
                    return {
                      desktop: {
                        breakpoint: {
                          max: 3000,
                          min: 1024,
                        },
                        items: 2,
                        partialVisibilityGutter: 40,
                      },
                      mobile: {
                        breakpoint: {
                          max: 464,
                          min: 0,
                        },
                        items: 1,
                        partialVisibilityGutter: 30,
                      },
                      tablet: {
                        breakpoint: {
                          max: 1024,
                          min: 464,
                        },
                        items: 2,
                        partialVisibilityGutter: 30,
                      },
                    }
                  }
                })()}
                rewind={false}
                rewindWithAnimation={false}
                rtl={false}
                shouldResetAutoplay
                showDots={false}
                sliderClass=""
                slidesToSlide={1}
                swipeable
              >
                {props.data.text.map((content, i) => {
                  if (content.type != null && content.type === 1) {
                    return (
                      <div key={i} className="w-full sm:mx-auto sm:w-3/5">
                        <h1 className="text-center text-4xl font-semibold leading-tight text-yellow-600 sm:text-left sm:text-5xl">
                          {content.title}
                        </h1>
                        <h2 className="sm:text-md pb-5 text-left font-sans text-sm text-gray-900 sm:text-2xl">
                          {content.subTitle}
                        </h2>
                        <div
                          style={{
                            backgroundImage: "url('" + content.image + "')",
                          }}
                          className="h-96 bg-stone-100 bg-cover bg-center bg-no-repeat"
                        ></div>
                        <p className="mt-10">
                          {(function () {
                            if (Array.isArray(content.text)) {
                              return content.text.map((txt, i) => (
                                <p
                                  className="mt-3 font-sans font-light"
                                  key={i}
                                >
                                  {txt}
                                </p>
                              ))
                            } else {
                              return content.text
                            }
                          })()}
                        </p>
                      </div>
                    )
                  } else {
                    return (
                      <div
                        key={i}
                        className="ml-10 mr-10 min-h-full bg-gray-200 p-5 shadow-md"
                      >
                        <h1 className="text-3xl italic">{content.title}</h1>
                        <h2 className="mb-10 text-2xl">{content.subTitle}</h2>
                        <div
                          style={{
                            backgroundImage: "url('" + content.image + "')",
                          }}
                          className="min-h-[200px] bg-contain bg-center bg-no-repeat"
                        ></div>
                        <p className="mt-10">
                          {(function () {
                            if (Array.isArray(content.text)) {
                              return content.text.map((txt, i) => (
                                <p className="mt-3" key={i}>
                                  {txt}
                                </p>
                              ))
                            } else {
                              return content.text
                            }
                          })()}
                        </p>
                      </div>
                    )
                  }
                })}
              </Carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CardContentSlides