www/components/recent-posts.tsx

import Link from "next/link";
import { toRelativeDate } from "../lib/date";
import style from '../styles/recent-posts.module.css';
import PostsInfo from '../public/posts.json';

function PostBlock({ slug, otime, title }: { slug: string, otime: string, title: string }) {
    return (
        <div className={style.block}>
            <span className={style.postDate}>
                {toRelativeDate(new Date(otime))}
            </span>
            <div className={style.postTitle}>
                <Link href={`/posts/${slug}`}>
                    {title}
                </Link>
            </div>
        </div>
    );
}

function RecentPosts() {
    const posts = Object.entries(PostsInfo).reverse();
    if (!posts.length)
        return <></>;
    return (
        <div className='block'>
            <h2>Recent Posts</h2>
            <div className={style.container}>
                {posts?.slice(0, 10)
                    .map(([slug, post]: any, i: number) => {
                        return (
                            <PostBlock
                                key={i}
                                slug={slug}
                                title={post.title}
                                otime={post.otime} />
                        );
                    })}
            </div>
            {
                posts.length > 10 &&
                <div className={style.more}>
                    <Link href='/posts' >More...</Link>
                </div>
            }
        </div>
    );
}

export default RecentPosts;