Task Complete
This commit was merged in pull request #38.
This commit is contained in:
Ebube
@@ -1,102 +1,88 @@
|
||||
import React from 'react';
|
||||
import BlogImg1 from '../../assets/images/blog/p1.jpg';
|
||||
import BlogImg2 from '../../assets/images/blog/p2.jpg';
|
||||
import BlogImg3 from '../../assets/images/blog/p3.jpg';
|
||||
import BlogImg4 from '../../assets/images/blog/p4.jpg';
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import BlogImg1 from "../../assets/images/blog/p1.jpg";
|
||||
|
||||
function BlogSideBar() {
|
||||
return (
|
||||
<div className="blog-sidebar">
|
||||
/**
|
||||
* 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",
|
||||
});
|
||||
|
||||
<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="#">IT & Software</a>*/}
|
||||
{/* <span>(13)</span>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li>*/}
|
||||
{/* <a href="#">Photography</a>*/}
|
||||
{/* <span>(4)</span>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li>*/}
|
||||
{/* <a href="#">Technology</a>*/}
|
||||
{/* <span>(16)</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>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg1} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Using creative problem Solving</a>
|
||||
</h5>
|
||||
<span>March 10, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg2} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Fundamentals of UI Design</a>
|
||||
</h5>
|
||||
<span>Jan 14, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg3} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Making music with Other people</a>
|
||||
</h5>
|
||||
<span>April 12, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg4} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Brush strokes energize Trees in paintings</a>
|
||||
</h5>
|
||||
<span>July 4, 2020</span>
|
||||
</div>
|
||||
</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>*/}
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user