microblog/app/posts.tsx

'use client-only';

import { Post } from '@/lib/getPosts';
import { FC } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface PostProps {
  posts: Post[];
}
const Posts: FC<PostProps> = ({ posts }) => {
  return (
    <>
      {posts.map((p) => (
        <div className="space-y-2 text-white">
          <p className="font-bold">{p.author.name}</p>
          <p>{p.title}</p>
          <div>
            {p.message && (
              <ReactMarkdown children={p.message} remarkPlugins={[remarkGfm]} />
            )}
          </div>
        </div>
      ))}
    </>
  );
};

export default Posts;