Gwk-Cultural-Park/components/Sections/WhatsNewMonthlyUpdate2.tsx

77 lines
2.5 KiB
TypeScript
Raw Permalink Normal View History

2024-09-07 01:40:25 +00:00
// SECTION: WHATSNEW
import axios from 'axios'
import Link from 'next/link'
import React, { Children, useEffect, useState } from 'react'
import { format, parseISO } from 'date-fns'
//import { Button } from '@material-tailwind/react'
import { IoCalendarOutline, IoFolderOutline } from 'react-icons/io5'
const WhatsNewMonthlyUpdate2 = () => {
const [whatsnew, setData] = useState([])
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get(
'https://cmswp.gwkbali.com/wp-json/wp/v2/monthly-release/'
)
setData(response.data)
} catch (error) {
console.error('Error fetching data:', error)
}
}
fetchData()
}, [])
return (
<div>
<div className="pb-2 pt-2 sm:pb-0 sm:pt-0">
<Link
href={`/media-corner/page/1`}
className="readmore font-sans text-sm text-stone-600 hover:text-stone-900"
>
<span className="inline-flex items-center pb-2 font-sans text-base sm:pb-5 sm:text-base">
<IoFolderOutline />
<span className="pl-2">News & Media</span>
</span>
</Link>
</div>
{whatsnew.slice(1, 4).map((item) => (
<div key={item.id}>
<ul>
<li key={item.id} className="pb-2 sm:pb-2">
<div>
<Link href={`/monthly-release/${item.slug}`}>
<h3 className="sm:text-md text-md pb-2 font-semibold leading-tight text-stone-900 duration-150 ease-in hover:text-yellow-600"
dangerouslySetInnerHTML={{
__html: item.title.rendered,
}}
></h3>
{/*
<h3
className="animate-delay-600 text-slate-900 animate-fade pb-3 text-3xl font-semibold leading-tight duration-300 ease-in animate-duration-[600ms] animate-once hover:text-yellow-600 sm:text-4xl"
dangerouslySetInnerHTML={{
__html: newsroompost.title.rendered,
}}
></h3> */}
</Link>
<span className="inline-flex items-center font-sans text-sm text-stone-600">
<IoCalendarOutline />
&nbsp;{format(new Date(item.date), 'dd-MM-yyyy')}
</span>
</div>
</li>
</ul>
</div>
))}
</div>
)
}
export default WhatsNewMonthlyUpdate2