victorAnumudu
70 lines
2.0 KiB
JavaScript
70 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import Link from "next/link";
|
|
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 href={`/blog/blogdetail/${post?.id}`}>
|
|
<img width='auto' height='auto' src={blogImg} alt="blog-img" style={{top: "20px"}} loading="lazy" />
|
|
</Link>
|
|
<h5>
|
|
<Link href={`/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>
|
|
<Link href="/about-us">About</Link>
|
|
</li>
|
|
<li>
|
|
<a href={process.env.NEXT_PUBLIC_DASH_URL_SIGNUP}>Sign up</a>
|
|
</li>
|
|
<li>
|
|
<a href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>Login</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://blog.wrenchboard.com/">More Articles</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
<aside className="widget widget-trend-post">
|
|
<h3 className="widget-title">Other Posts</h3>
|
|
{renderOtherBlogPosts()}
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BlogSideBar;
|