26 lines
1.1 KiB
TypeScript
26 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import Link from "next/link";
|
|
import type { BlogPost } from "@/lib/types";
|
|
|
|
export function RelatedPosts({ posts }: { posts: BlogPost[] }) {
|
|
if (!posts?.length) return null;
|
|
|
|
return (
|
|
<section className="rounded-xl border border-gray-100 bg-gray-50 p-6 my-8">
|
|
<h2 className="text-lg font-bold text-gray-900 mb-4">Related Guides</h2>
|
|
<ul className="grid gap-4 sm:grid-cols-2">
|
|
{posts.map(p => (
|
|
<li key={p.slug} className="group">
|
|
<Link href={`/blog/${p.slug}`} className="block h-full p-4 rounded-lg bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 transition-all">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 mb-2 line-clamp-2">
|
|
{p.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-500 line-clamp-2">{p.description}</p>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|