115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
|
// SECTION: WHATSNEW
|
||
|
|
import axios from 'axios'
|
||
|
|
import Image from 'next/image'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import React, { useEffect, useState } from 'react'
|
||
|
|
import { Carousel, Typography, Button } from '@material-tailwind/react'
|
||
|
|
|
||
|
|
const WhatsNewMediaCorner = () => {
|
||
|
|
const [whatsnew, setData] = useState([])
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchData = async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get(
|
||
|
|
'https://cmswp.gwkbali.com/wp-json/wp/v2/mediacorner/'
|
||
|
|
)
|
||
|
|
setData(response.data)
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching data:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchData()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Carousel
|
||
|
|
className=""
|
||
|
|
placeholder={null}
|
||
|
|
loop={true}
|
||
|
|
autoplay={true}
|
||
|
|
navigation={({ setActiveIndex, activeIndex, length }) => (
|
||
|
|
<div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
|
||
|
|
{new Array(length).fill('').map((_, i) => (
|
||
|
|
<span
|
||
|
|
key={i}
|
||
|
|
className={`block h-1 cursor-pointer rounded-2xl transition-all content-[''] ${
|
||
|
|
activeIndex === i ? 'w-8 bg-white' : 'w-4 bg-white/50'
|
||
|
|
}`}
|
||
|
|
onClick={() => setActiveIndex(i)}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{whatsnew.slice(0, 3).map((item) => (
|
||
|
|
<div key={item.id} className="relative h-full w-full">
|
||
|
|
{/* {item._links["wp:featuredmedia"]} */}
|
||
|
|
{/* {item.featured_media ? item.featured_media.source_url : ''} */}
|
||
|
|
|
||
|
|
<Image
|
||
|
|
//src="https://cdn.sanity.io/images/helyis1v/production/5dcd9f8851d478df6cc77f491766f6e6c5def6d7-1920x1080.png"
|
||
|
|
src="/images/5dcd9f8851d478df6cc77f491766f6e6c5def6d7-1920x1080.png"
|
||
|
|
alt={item.title.rendered}
|
||
|
|
width={800}
|
||
|
|
height={300}
|
||
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||
|
|
quality={75}
|
||
|
|
placeholder="empty"
|
||
|
|
className="h-full min-h-screen w-full object-cover opacity-90"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="absolute inset-0 grid h-full w-full place-items-center bg-black/80">
|
||
|
|
<div className="w-3/4 text-center md:w-2/4">
|
||
|
|
<Link href={`/media-corner/${item.slug}`}>
|
||
|
|
<Typography
|
||
|
|
placeholder={null}
|
||
|
|
variant="h3"
|
||
|
|
color="white"
|
||
|
|
className="mb-4 font-PlayfairDisplay text-2xl font-extrabold leading-normal text-orange-300 duration-300 ease-in hover:text-stone-50 sm:text-4xl sm:leading-tight "
|
||
|
|
>
|
||
|
|
{item.title.rendered}
|
||
|
|
</Typography>
|
||
|
|
</Link>
|
||
|
|
{/* <Typography
|
||
|
|
children={null}
|
||
|
|
placeholder={null}
|
||
|
|
variant="lead"
|
||
|
|
color="white"
|
||
|
|
className="mb-12 text-base font-medium opacity-80"
|
||
|
|
> */}
|
||
|
|
|
||
|
|
<p
|
||
|
|
dangerouslySetInnerHTML={{
|
||
|
|
__html: item.excerpt.rendered,
|
||
|
|
}}
|
||
|
|
className="mb-12 font-Inter text-xs font-normal text-stone-50 opacity-80 sm:text-base"
|
||
|
|
></p>
|
||
|
|
|
||
|
|
{/* </Typography> */}
|
||
|
|
|
||
|
|
<div className="flex justify-center gap-2">
|
||
|
|
<Link href={`/media-corner/${item.slug}`} className="">
|
||
|
|
<Button
|
||
|
|
placeholder={null}
|
||
|
|
size="sm"
|
||
|
|
color="white"
|
||
|
|
variant="outlined"
|
||
|
|
className="text-xs font-normal"
|
||
|
|
>
|
||
|
|
Read More
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</Carousel>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default WhatsNewMediaCorner
|