FloatSystems/float-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

added blogitem component and rendered

Browse Source
This commit was merged in pull request #30.
This commit is contained in:
victorAnumudu
2023-04-10 15:53:09 +01:00
parent 1428ddd925
commit bc2e6f36b4
8 changed files with 148 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BlogItems.js
+109
View File
@@ -0,0 +1,109 @@
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?.payload == undefined ? // API CALL IN PROGRESS
<div className='col-12 text-center display-4'>Loading...</div>
:
// API CALL FINISHED
(
blogData?.payload?.blogdata.length < 1 ?
<div className='col-12 text-center display-4'>No Blog Currently Found!</div>
:
blogData?.payload?.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" src={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="single-post.html">{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" />
</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="single-post.html">{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