react-components/blog/more-stories.tsx

30 lines
898 B
TypeScript

import { Post } from "@/interfaces/post";
import { PostPreview } from "./post-preview";
type Props = {
posts: Post[];
lang: string;
};
export function MoreStories({ posts, lang }: Props) {
return (
<section>
<h2 className="mb-8 text-5xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
title={typeof post.title === "string" ? post.title : post.title[lang]}
coverImage={post.coverImage}
date={post.date}
author={post.author}
slug={post.slug}
excerpt={typeof post.excerpt === "string" ? post.excerpt : post.excerpt[lang]}
/>
))}
</div>
</section>
);
}