177 lines
6.0 KiB
TypeScript
177 lines
6.0 KiB
TypeScript
import 'react-multi-carousel/lib/styles.css'
|
|
|
|
import { height } from 'components/OpenGraphImage'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import React, { useEffect, useState } from 'react'
|
|
// import Carousel from 'react-multi-carousel'
|
|
import { Carousel } from '@material-tailwind/react'
|
|
import Container from 'components/BlogContainer'
|
|
|
|
export default function CardContentHistory({ props }) {
|
|
let { title, subtitle, text, image, footer } = props
|
|
|
|
return (
|
|
<div className="pt-10 sm:m-10 sm:pt-0">
|
|
<div className="container_ mb-20">
|
|
<div className="row g-0 rounded-md border bg-stone-50 p-0">
|
|
<div className="col-12">
|
|
<div className="p-7 sm:p-10">
|
|
<h1 className="text-3xl font-semibold text-yellow-600 sm:text-4xl">
|
|
{title}
|
|
</h1>
|
|
<h2 className="pb-5 text-left font-sans text-sm font-bold uppercase text-gray-900 sm:text-4xl">
|
|
{subtitle}
|
|
</h2>
|
|
|
|
<div className="pb-5">
|
|
<Carousel loop={true} placeholder={null}>
|
|
{(function () {
|
|
if (image != null) {
|
|
return image.map((dat, i) => {
|
|
//console.log(dat.url)
|
|
|
|
return (
|
|
<Image
|
|
width={800}
|
|
height={800}
|
|
key={i}
|
|
src={dat.url}
|
|
style={{
|
|
display: 'block',
|
|
height: '100%',
|
|
margin: 'auto',
|
|
width: '100%',
|
|
}}
|
|
alt={dat.alt}
|
|
/>
|
|
)
|
|
})
|
|
}
|
|
return <div></div>
|
|
})()}
|
|
</Carousel>
|
|
|
|
{/* <Carousel
|
|
additionalTransfrom={0}
|
|
arrows
|
|
autoPlaySpeed={3000}
|
|
centerMode={false}
|
|
className=""
|
|
containerClass="container"
|
|
dotListClass=""
|
|
draggable
|
|
focusOnSelect={false}
|
|
infinite
|
|
itemClass=""
|
|
keyBoardControl
|
|
minimumTouchDrag={80}
|
|
pauseOnHover
|
|
renderArrowsWhenDisabled={false}
|
|
renderButtonGroupOutside={false}
|
|
renderDotsOutside={false}
|
|
responsive={{
|
|
desktop: {
|
|
breakpoint: {
|
|
max: 3000,
|
|
min: 1024,
|
|
},
|
|
items: 1,
|
|
},
|
|
mobile: {
|
|
breakpoint: {
|
|
max: 464,
|
|
min: 0,
|
|
},
|
|
items: 1,
|
|
},
|
|
tablet: {
|
|
breakpoint: {
|
|
max: 1024,
|
|
min: 464,
|
|
},
|
|
items: 1,
|
|
},
|
|
}}
|
|
rewind={false}
|
|
rewindWithAnimation={false}
|
|
rtl={false}
|
|
shouldResetAutoplay
|
|
showDots
|
|
sliderClass=""
|
|
slidesToSlide={1}
|
|
swipeable
|
|
>
|
|
{(function () {
|
|
if (image != null) {
|
|
return image.map((dat, i) => {
|
|
return (
|
|
<Image
|
|
width={200}
|
|
height={200}
|
|
key={i}
|
|
src={dat.url}
|
|
style={{
|
|
display: 'block',
|
|
height: '100%',
|
|
margin: 'auto',
|
|
width: '100%',
|
|
}}
|
|
alt={dat.alt}
|
|
/>
|
|
)
|
|
})
|
|
}
|
|
return <div></div>
|
|
})()}
|
|
</Carousel> */}
|
|
</div>
|
|
|
|
<div className="">
|
|
{text.map((content, i) => {
|
|
return (
|
|
<p key={i} className="font-sans font-light">
|
|
{content}
|
|
</p>
|
|
)
|
|
})}
|
|
{(function () {
|
|
if (footer != null) {
|
|
return (
|
|
<div className="pt-10">
|
|
<div className="text-right text-2xl font-semibold leading-tight text-yellow-600 duration-300 ease-in hover:text-stone-900 sm:text-2xl">
|
|
{footer.title}
|
|
</div>
|
|
<div className="mb-3 text-right font-sans text-3xl font-semibold uppercase">
|
|
<div
|
|
className="inline-block"
|
|
style={{
|
|
width: '250px',
|
|
borderBottom: '1px solid #808080',
|
|
}}
|
|
>
|
|
<a
|
|
href={footer.downloadpdf}
|
|
target="_blank"
|
|
download
|
|
className="duration-300 ease-in-out hover:text-yellow-600"
|
|
>
|
|
{footer.subTitle}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export {}
|