14 blog post schedule

src/components/blog/RelatedPosts.tsx

@@ -0,0 +1,25 @@
+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>
+    );
+}