46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
|
import axios from 'axios'
|
||
|
|
import Image from 'next/image'
|
||
|
|
import React, { useEffect, useState } from 'react'
|
||
|
|
import { Fade } from 'react-awesome-reveal'
|
||
|
|
|
||
|
|
import Container from 'components/BlogContainer'
|
||
|
|
|
||
|
|
const WhatsNewBanner = () => {
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchWhatsNewBanner = async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get('/api/homepageSection/whatsNewBanner')
|
||
|
|
|
||
|
|
setData(response.data)
|
||
|
|
// console.log(fetchWhatsNewBanner)
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching data:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchWhatsNewBanner()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Fade duration={2000} fraction={0} damping={0.5} triggerOnce>
|
||
|
|
<div className="m-0 p-0">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Image
|
||
|
|
key={item._id}
|
||
|
|
src={item.mainImage}
|
||
|
|
alt={item.alt}
|
||
|
|
className="m-0 aspect-square p-0"
|
||
|
|
width={500}
|
||
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1440px) 100vw, 100vw"
|
||
|
|
height={600}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Fade>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default WhatsNewBanner
|