2025-10-11 20:05:39 +05:30

67 lines
1.9 KiB
JavaScript

import { useEffect } from "react";
import { calender } from "../utils";
import Link from "next/link";
import { BlogData } from "@/utils/constant.utils";
const BlogSidebar = ({ currentSlug }) => {
useEffect(() => {
calender();
}, []);
const relatedBlogs = BlogData?.filter((b) => b.slug !== currentSlug) || [];
const randomRelated =
relatedBlogs.length > 0
? relatedBlogs[Math.floor(Math.random() * relatedBlogs.length)]
: null;
return (
<div className="col-lg-12 col-md-12 blog-sidebar mt-4">
{/* Categories */}
<div className="widget-items mb-40 categories">
<div className="widget-title">
<h2>Categories</h2>
</div>
<div className="catagory-item">
<ul>
{BlogData.map((blog) => (
<li className="hr-3" key={blog.id}>
<Link
href={`/${blog.slug}`}
className={blog.slug === currentSlug ? "current" : ""}
>
{blog.title}
</Link>
</li>
))}
</ul>
</div>
</div>
{randomRelated && (
<div className="widget-items mb-40 related-post">
<div className="widget-title">
<h2>Related Blog</h2>
</div>
<div className="widget-recent-post-single" key={randomRelated.id}>
<Link href={`/${randomRelated.slug}`}>
<img
src={randomRelated.image}
alt={randomRelated.title}
className="mb-3 w-100"
style={{ borderRadius: "8px" }}
/>
</Link>
<div className="rpost-content mt-2">
<Link href={`/${randomRelated.slug}`}>
<h5>{randomRelated.title}</h5>
</Link>
</div>
</div>
</div>
)}
</div>
);
};
export default BlogSidebar;