150 lines
5.5 KiB
TypeScript
150 lines
5.5 KiB
TypeScript
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
|