101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import {
|
|
getRecentPosts,
|
|
getCategories,
|
|
formatDate,
|
|
type BlogPost,
|
|
} from "@/data/blog";
|
|
import BlogSearch from "./BlogSearch";
|
|
|
|
/**
|
|
* Sticky single-post sidebar: Search, Recent Posts, Categories and a CTA card.
|
|
* Styling lives in SingleBlog's scoped <style> block (dm-blog-* classes).
|
|
*/
|
|
export default function BlogSidebar({ current }: { current?: BlogPost }) {
|
|
const recent = getRecentPosts(5)
|
|
.filter((p) => p.slug !== current?.slug)
|
|
.slice(0, 4);
|
|
const categories = getCategories();
|
|
|
|
return (
|
|
<aside className="dm-blog-sidebar" aria-label="Blog sidebar">
|
|
{/* Search */}
|
|
<section className="dm-blog-widget">
|
|
<h2 className="dm-blog-widget-title">Search</h2>
|
|
<BlogSearch />
|
|
</section>
|
|
|
|
{/* Recent Posts */}
|
|
<section className="dm-blog-widget">
|
|
<h2 className="dm-blog-widget-title">Recent Posts</h2>
|
|
<ul className="dm-blog-recent">
|
|
{recent.map((p) => (
|
|
<li key={p.slug}>
|
|
<Link href={`/blog/${p.slug}`} className="dm-blog-recent-item">
|
|
<span className="dm-blog-recent-thumb">
|
|
<Image
|
|
src={p.image}
|
|
alt={p.title}
|
|
fill
|
|
sizes="62px"
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
</span>
|
|
<span className="dm-blog-recent-meta">
|
|
<span className="dm-blog-recent-title">{p.title}</span>
|
|
<time dateTime={p.date} className="dm-blog-recent-date">
|
|
{formatDate(p.date)}
|
|
</time>
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
{/* Categories */}
|
|
<section className="dm-blog-widget">
|
|
<h2 className="dm-blog-widget-title">Categories</h2>
|
|
<ul className="dm-blog-categories">
|
|
{categories.map((c) => (
|
|
<li key={c.name}>
|
|
<Link href="/blog" className="dm-blog-category-item">
|
|
<span>{c.name}</span>
|
|
<span className="dm-blog-category-count">{c.count}</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
{/* CTA Card */}
|
|
<section className="dm-blog-widget dm-blog-cta-card">
|
|
<h2 className="dm-blog-cta-title">Planning delivery routes?</h2>
|
|
<p className="dm-blog-cta-text">
|
|
Talk to us about reducing wasted distance, missed windows, and avoidable
|
|
vehicle time.
|
|
</p>
|
|
<Link href="/contact" className="dm-blog-cta-btn">
|
|
Contact Us
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<polyline points="12 5 19 12 12 19" />
|
|
</svg>
|
|
</Link>
|
|
</section>
|
|
</aside>
|
|
);
|
|
}
|