CMU / react / src / components / BlogPostList.tsx

import type { BlogPost } from "../lib/post";
import { BlogPostItem } from "./BlogPostItem";

export function BlogPostList({ posts }: { posts: BlogPost[] }) {
  if (!posts.length) {
    return <p className="text-lg text-center">No blog posts available</p>;
  }
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 items-center justify-center gap-5">
      {posts
        .sort(
          (a, b) =>
            new Date(b.datePosted).getTime() - new Date(a.datePosted).getTime(),
        )
        .map((post, idx) => (
          <BlogPostItem
            key={idx}
            idx={post.id}
            title={post.title}
            summary={post.summary}
            datePosted={post.datePosted}
          />
        ))}
    </div>
  );
}