CHIEFSOFT\ameye
164 lines
11 KiB
JavaScript
164 lines
11 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";
|
|
import MermsBlogFix from "../components/sections/MermsBlogFix";
|
|
|
|
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>*/}
|
|
<Link
|
|
href={`/blogview/${data?.payload?.blogdata[0].id}`}
|
|
// href={{pathname: '/merms-blogview', query:{...data?.payload?.blogdata[0], image_url:data?.payload?.image_url}}}
|
|
>
|
|
{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 && index < 10){
|
|
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> */}
|
|
<Link
|
|
href={`/blogview/${item.id}`}
|
|
// href={{pathname: '/merms-blogview', query:{...item, image_url:data?.payload?.image_url}}}
|
|
>
|
|
{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 */}
|
|
{/*<MermsBlogFix />*/}
|
|
</>
|
|
:
|
|
<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>
|
|
</>
|
|
)
|
|
} |