Ebube
89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import BlogImg1 from "../../assets/images/blog/p1.jpg";
|
|
|
|
/**
|
|
* Renders a sidebar for a blog.
|
|
* @param {Object} blogs - An object containing the data for the blog posts.
|
|
* @returns {JSX.Element} - JSX code that renders the blog sidebar.
|
|
*/
|
|
function BlogSideBar({ blogs }) {
|
|
/**
|
|
* Renders other blog posts.
|
|
* This is an Array of JSX elements representing the other blog posts.
|
|
*/
|
|
const renderOtherBlogPosts = () => {
|
|
return blogs?.blogdata?.slice(0, 4).map((post) => {
|
|
const blogDate = new Date(post.post_date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
|
|
const blogImg =
|
|
post.meta_value != null
|
|
? `${blogs?.image_url}/${post.meta_value}`
|
|
: BlogImg1;
|
|
|
|
return (
|
|
<div className="popular-post" key={post.id}>
|
|
<Link to={`/blog/blogdetail/${post?.id}`}>
|
|
<img src={blogImg} alt="blog-img" style={{top: "20px"}} loading="lazy" />
|
|
</Link>
|
|
<h5>
|
|
<Link to={`/blog/blogdetail/${post?.id}`}>{post?.post_title}</Link>
|
|
</h5>
|
|
<span>{blogDate}</span>
|
|
</div>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="blog-sidebar">
|
|
<aside className="widget widget-categories">
|
|
{/*<h3 className="widget-title">Categories</h3>*/}
|
|
<ul>
|
|
<li>
|
|
<a href="#">About</a>
|
|
{/*<span>(24)</span>*/}
|
|
</li>
|
|
<li>
|
|
<a href="#">Sign up</a>
|
|
{/*<span>(15)</span>*/}
|
|
</li>
|
|
<li>
|
|
<a href="#">Login</a>
|
|
<span>(8)</span>
|
|
</li>
|
|
<li>
|
|
<a href="https://blog.wrenchboard.com/">More Articles</a>
|
|
{/*<span>(12)</span>*/}
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
<aside className="widget widget-trend-post">
|
|
<h3 className="widget-title">Other Posts</h3>
|
|
{renderOtherBlogPosts()}
|
|
</aside>
|
|
{/*<aside className="widget">*/}
|
|
{/* <h3 className="widget-title">Popular Tags</h3>*/}
|
|
{/* <div className="tags">*/}
|
|
{/* <a href="#">Bisy LMS</a>*/}
|
|
{/* <a href="#">Design</a>*/}
|
|
{/* <a href="#">General</a>*/}
|
|
{/* <a href="#">Online</a>*/}
|
|
{/* <a href="#">Prevention</a>*/}
|
|
{/* <a href="#">Artist</a>*/}
|
|
{/* <a href="#">Education</a>*/}
|
|
{/* <a href="#">Motivation</a>*/}
|
|
{/* <a href="#">Politico</a>*/}
|
|
{/* <a href="#">Live Cases</a>*/}
|
|
{/* </div>*/}
|
|
{/*</aside>*/}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BlogSideBar;
|