microblog/app/posts.tsx

import { getPosts } from '@/lib/getPosts';
import { cookies } from 'next/headers';
import { use } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

export default function Posts() {
  const c = cookies();

  const posts = use(getPosts());

  return (
    <>
      {posts.map((p) => (
        <div className="space-y-2 rounded-md border border-solid border-gray-700 p-4 text-white">
          <p className="font-bold">@{p.author.name}</p>
          <p className="italic">{p.title}</p>
          <div className="markdown">
            {p.message && (
              <ReactMarkdown children={p.message} remarkPlugins={[remarkGfm]} />
            )}
          </div>
          <small className="mt-2">
            {new Date(p.time * 1000).toLocaleString()}
          </small>
        </div>
      ))}
    </>
  );
}