blog editor

src/app/blog/[slug]/page.tsx

@@ -2,6 +2,8 @@ import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { TRPCError } from "@trpc/server";
 import { servTrpc } from "~/app/_trpc/ServerClient";
+import { Badge } from "~/components/ui/badge";
+import { mdxComponents } from "../_components/mdx-components";
 
 type Props = {
   params: Promise<{ slug: string }>;
@@ -31,9 +33,16 @@ export default async function BlogPostPage({ params }: Props) {
             })}
           </time>
         )}
+        {post.tags.length > 0 && (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {post.tags.map((tag) => (
+              <Badge key={tag} variant="outline">{tag}</Badge>
+            ))}
+          </div>
+        )}
       </header>
       <article className="prose dark:prose-invert max-w-none">
-        <MDXRemote source={post.content} />
+        <MDXRemote source={post.content} components={mdxComponents} />
       </article>
     </main>
   );