victorAnumudu
193 lines
13 KiB
JavaScript
193 lines
13 KiB
JavaScript
//"use server"
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import VideoPopup from "../components/elements/VidepPopup"
|
|
import Layout from "../components/layout/Layout"
|
|
import Link from "next/link"
|
|
import queryKeys from "../components/queryclientProvider/queryKeys";
|
|
|
|
export default function Home() {
|
|
|
|
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 (
|
|
<>
|
|
<Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
|
|
<div>
|
|
<section id="blog-page" className="pb-60 inner-page-hero blog-page-section">
|
|
<div className="container">
|
|
{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) ?
|
|
<>
|
|
{/* WIDE BLOG POST */}
|
|
<div className="blog-post wide-post wow fadeInUp">
|
|
<div className="row d-flex align-items-center">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="col-md-6">
|
|
<div className="blog-post-img">
|
|
<img
|
|
className="img-fluid r-16"
|
|
src={`${data?.payload?.image_url}/${data?.payload?.blogdata[0].meta_value}`}
|
|
alt="blog-post-image" />
|
|
</div>
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="col-md-6">
|
|
<div className="blog-post-txt">
|
|
|
|
<h3 className="s-38 w-700">
|
|
<Link href={data?.payload?.blogdata[0].guid}> {data?.payload?.blogdata[0].post_title}</Link>
|
|
</h3>
|
|
{/* Text */}
|
|
{/* <p>{data?.payload?.blogdata[0].post_content.substring(0, 250)}</p> */}
|
|
<p dangerouslySetInnerHTML={{ __html: data?.payload?.blogdata[0].post_content.length > 250 ? data?.payload?.blogdata[0].post_content.substring(0, 250) + ' ...' : data?.payload?.blogdata[0].post_content.substring(0, 250) }} />
|
|
{/* Post Meta */}
|
|
<div className="blog-post-meta mt-30">
|
|
<ul className="post-meta-list ico-10">
|
|
<li><p className="w-500">MERMS </p></li>
|
|
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
|
<li><p>{new Date(data?.payload?.blogdata[0]?.post_date).toDateString()}</p></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> {/* END BLOG POST TEXT */}
|
|
</div> {/* End row */}
|
|
</div> {/* END WIDE BLOG POST */}
|
|
{/* POSTS WRAPPER */}
|
|
<div className="posts-wrapper">
|
|
<div className="row">
|
|
{/* BLOG POST #1 */}
|
|
{data?.payload?.blogdata.map((item, index)=>{
|
|
if(index > 0){
|
|
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>
|
|
)
|
|
}
|
|
})}
|
|
{/* END BLOG POST #1 */}
|
|
</div>
|
|
</div> {/* END POSTS WRAPPER */}
|
|
|
|
<div className="blog-post square-post">
|
|
<div className="row">
|
|
<div className="col">
|
|
{/* SQUARE BLOG POST WRAPPER */}
|
|
<div className="square-post-wrapper bg--black-400 block-shadow r-16 wow fadeInUp">
|
|
<div className="row d-flex align-items-center">
|
|
{/* BLOG POST TEXT */}
|
|
<div className="col-md-6 order-last order-md-2">
|
|
<div className="blog-post-txt color--white">
|
|
|
|
<h4 className="s-34 w-700 mb-20">
|
|
<Link href="/single-post">Lipsum sodales sapien Martex aliquet blandit
|
|
augue gravida posuere
|
|
</Link>
|
|
</h4>
|
|
{/* Text */}
|
|
<p>Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta
|
|
undo velna dolor libero risus aliquet tempus posuere vitae tempor
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="blog-post-meta mt-30">
|
|
<ul className="post-meta-list ico-10">
|
|
<li><p className="w-500">MermsEmr Team</p></li>
|
|
<li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
|
|
<li><p>Feb 12, 2023</p></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="col-md-6 order-first order-md-2">
|
|
<div className="blog-post-img video-preview">
|
|
{/* Play Icon */}
|
|
<VideoPopup style={1}/>
|
|
{/* Preview Image */}
|
|
<img className="img-fluid" src="/images/blog/post-10-img.jpg" alt="video-preview" />
|
|
</div>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* END SQUARE BLOG POST WRAPPER */}
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* END SQUARE BLOG POST */}
|
|
</>
|
|
:
|
|
<div className="">
|
|
<div className="">
|
|
<p className='text-mute text-center'>No Blog Found!</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</>
|
|
}
|
|
</div> {/* End container */}
|
|
</section> {/* END BLOG POSTS LISTING */}
|
|
{/* PAGE PAGINATION
|
|
============================================= */}
|
|
|
|
{/* DIVIDER LINE */}
|
|
<hr className="divider" />
|
|
{/* NEWSLETTER-1
|
|
============================================= */}
|
|
|
|
</div>
|
|
</Layout>
|
|
</>
|
|
)
|
|
} |