victorAnumudu
102 lines
5.3 KiB
JavaScript
102 lines
5.3 KiB
JavaScript
import { useQuery } from "@tanstack/react-query";
|
|
import Link from "next/link";
|
|
import queryKeys from "../queryclientProvider/queryKeys";
|
|
|
|
export default function MermsRecentBlog(){
|
|
|
|
const {data, isFetching, isError, error} = useQuery({
|
|
queryKey: queryKeys.blog,
|
|
queryFn: async () => {
|
|
try {
|
|
const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
|
|
const res = await fetch(blog_url)
|
|
const data = await res.json()
|
|
return data
|
|
}
|
|
catch(e){
|
|
return(e)
|
|
}
|
|
}
|
|
})
|
|
|
|
return <>
|
|
<section id="blog-1" className="py-100 blog-section division">
|
|
<div className="container">
|
|
{/* SECTION TITLE */}
|
|
<div className="row justify-content-center">
|
|
<div className="col-md-10 col-lg-9">
|
|
<div className="section-title mb-70">
|
|
{/* Title */}
|
|
<h2 className="s-50 w-700">Recent Articles from Our Blog</h2>
|
|
{/* Text */}
|
|
{/*<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>*/}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{isFetching ?
|
|
<div className="">
|
|
<div className="">
|
|
<p className='text-mute text-center'>Loading...</p>
|
|
</div>
|
|
</div>
|
|
: isError ?
|
|
<div className="">
|
|
<div className="">
|
|
<p className='text-danger text-center'>{error.message}</p>
|
|
</div>
|
|
</div>
|
|
:
|
|
<>
|
|
{(data && data?.payload?.blogdata?.length > 0) ?
|
|
<div className="row">
|
|
{data?.payload?.blogdata.map((item, index)=>{
|
|
if(index < 3){
|
|
return (
|
|
<div key={item.id || index} className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp clearfix">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img mb-35">
|
|
<img
|
|
className="img-fluid r-16"
|
|
src={`${data?.payload?.image_url}/${item.meta_value}`}
|
|
alt="blog-post-image"
|
|
/>
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
{/* <span className="post-tag color--red-400">Product News</span> */}
|
|
{/* Post Link */}
|
|
<h6 className="s-20 w-700">
|
|
<Link href={item.guid}> {item.post_title}</Link>
|
|
</h6>
|
|
{/* Text */}
|
|
<p dangerouslySetInnerHTML={{ __html: item.post_content.length > 250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} />
|
|
{/* Post Meta */}
|
|
<div className="blog-post-meta mt-20">
|
|
<ul className="post-meta-list ico-10">
|
|
<li><p className="p-sm w-500">Merms</p></li>
|
|
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
|
<li><p className="p-sm">{new Date(item.post_date).toDateString()}</p></li>
|
|
</ul>
|
|
</div>
|
|
</div> {/* END BLOG POST TEXT */}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
})}
|
|
</div>
|
|
:
|
|
<div className="">
|
|
<div className="">
|
|
<p className='text-mute text-center'>No Blog Found!</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</>
|
|
}
|
|
</div> {/* End container */}
|
|
</section>
|
|
</>
|
|
} |