fix issue in recent posts

Signed-off-by: Amrish Kushwaha <askmaurya48@gmail.com>

Author: isamrish

content/blog/2025-07-06--ui-aspects.mdx

@@ -1,10 +1,11 @@
 ---
-title: "UI Aspects"
+title: "UI Aspects (Living blog)"
 date: "2025-07-06"
 category: "production-ready"
+tags: ["UI Aspects", "Production Ready"]
 ---
 
-# All About UI Aspects (Living Document)
+# All About UI Aspects
 
 ## 🧱 1. Architecture & Design System
 - Use Atomic Design principles (atoms → molecules → organisms)

src/components/RecentPosts/index.tsx

@@ -3,6 +3,7 @@ import {  ChevronRight } from "react-feather";
 import { Card } from "../Card";
 import Link from "next/link";
 import { usePosts } from "../../graphql/allPostsQuery";
+import { getAllBlogsMetadata, BlogMetadata } from "../../../lib/blogs";
 
 interface Post {
   title: string;
@@ -14,13 +15,38 @@ interface Post {
   excerpt?: string;
 }
 
+// Convert BlogMetadata to Post format for consistency
+function convertBlogToPost(blog: BlogMetadata): Post {
+  return {
+    title: blog.title,
+    date: blog.date,
+    tags: blog.tags || [],
+    featured_image: "", // MDX posts don't have featured images
+    excerpt: `Recent blog post in category: ${blog.category}`,
+    slug: `/blog/${blog.slug}`,
+  };
+}
+
 export const RecentPosts = () => {
-  const posts: Post[] = usePosts(3);
+  const jsonPosts: Post[] = usePosts(3);
+
+  // Get MDX blog posts
+  const mdxBlogs = getAllBlogsMetadata();
+  const mdxPosts = mdxBlogs.map(convertBlogToPost);
+
+  // Combine and sort all posts by date
+  const allPosts = [...mdxPosts, ...jsonPosts].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+
+  // Take the 3 most recent posts
+  const recentPosts = allPosts.slice(0, 3);
+
   return (
     <div className="mt-12 mb-8">
       <h2 className="text-2xl font-bold mb-6 text-foreground">Recent Posts:</h2>
       <div className="flex flex-col gap-6">
-        {posts.map((res: Post) => {
+        {recentPosts.map((res: Post) => {
           return <Card {...res} key={res.title} />;
         })}
       </div>