Skip to content

Instantly share code, notes, and snippets.

@ryanto
Created August 9, 2023 17:01
Show Gist options
  • Save ryanto/ad9a9a53a085c4c4609cd8cc0e5d9e07 to your computer and use it in GitHub Desktop.
Save ryanto/ad9a9a53a085c4c4609cd8cc0e5d9e07 to your computer and use it in GitHub Desktop.
<Await> component
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment