DESKTOP-GBA0BK8\Admin
114 lines
5.7 KiB
JavaScript
114 lines
5.7 KiB
JavaScript
import React from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
// import SiteService from '../svs/SiteService';
|
|
|
|
const BlogItems = ({blogData}) => {
|
|
|
|
let location = useLocation().pathname
|
|
// const [blogData, setBlogData] = useState({}) // for holding blogs
|
|
// console.log(blogData.payload)
|
|
// const blogApi = new SiteService(); // instantiating the API SERVICE
|
|
// const getBlogData = async () => {
|
|
// try {
|
|
// const res = await blogApi.blogData();
|
|
// if(res.status == 200 /* && res.data.status > 0*/){
|
|
// console.log('blogitem',res.data.payload, res.data);
|
|
// setBlogData(res.data)
|
|
// return
|
|
// }
|
|
// }catch(error) {
|
|
// }
|
|
// };
|
|
|
|
// useEffect(() => {
|
|
// getBlogData();
|
|
// }, []);
|
|
|
|
return (
|
|
<div className="row">
|
|
{
|
|
blogData?.blogdata == undefined ? // API CALL IN PROGRESS
|
|
// <div className='col-12 text-center display-4'>Loading...</div>
|
|
<div className="col-12 text-center">
|
|
<div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
|
|
</div>
|
|
</div>
|
|
:
|
|
// API CALL FINISHED
|
|
(
|
|
blogData?.blogdata.length < 1 ?
|
|
<div className='col-12 text-center display-4'>No Blog Currently Found!</div>
|
|
:
|
|
blogData?.blogdata.map((blog, index) => {
|
|
if(location == '/blogs'){
|
|
return(
|
|
<div key={index} id="b-post-1" className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img rounded">
|
|
{/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
|
|
<img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">Float News</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-sm">
|
|
<a href="/sel_post/">{blog.post_title.substring(0,40)+' . . .'}</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+' . . .'}}></div>
|
|
{/* <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
|
|
congue
|
|
</p> */}
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>12 min read</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}else if (location != 'blogs' && index <= 5) {
|
|
return (
|
|
<div key={index} id="b-post-1" className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img rounded">
|
|
{/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
|
|
<img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">Float News</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-sm">
|
|
<a href="/sel_post">{blog.post_title.substring(0,40)+' . . .'}</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+' . . .'}}></div>
|
|
{/* <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
|
|
congue
|
|
</p> */}
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>12 min read</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
)
|
|
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BlogItems |