<Await> component

page.tsx

import { Markdown } from "@/app/components/markdown";
import { getComments, getPost } from "@/lib/db";
import { Suspense } from "react";

export default async function PostPage({
  params,
}: {
  params: { postId: string };
}) {
  let post = await getPost(params.postId);
  let comments = getComments(post);

  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tighter">{post.title}</h1>

      <div className="mt-4">
        <Markdown content={post.content} />
      </div>

      <Suspense fallback={<div className="mt-12">Loading comments...</div>}>
        <Await promise={comments}>
          {(comments) => (
            <div className="mt-12">
              <h2 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
                Comments
              </h2>
              <div className="mt-2 space-y-4">
                {comments.map((comment) => (
                  <div key={comment.id}>
                    <p>{comment.text}</p>
                    <div className="mt-1 text-sm text-gray-600">
                      - {comment.author}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </Await>
      </Suspense>
    </div>
  );
}

async function Await<T>({
  promise,
  children,
}: {
  promise: Promise<T>;
  children: (value: T) => JSX.Element;
}) {
  let data = await promise;

  return children(data);
}