lol

app/(pages)/blogs/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import fs from "fs/promises";
+import { Timer, TimeZone } from "iconoir-react";
 
 interface PropsParams {
     slug: string;
@@ -11,7 +12,22 @@ interface Props {
 export default async function Page({ params }: Props) {
     const { slug } = await params;
     const { default: Post, metadata } = await import(`@/blogs/${slug}.mdx`);
-    return <Post />;
+    return (
+        <>
+            <div className="mb-6 rounded-lg border border-gray-300 p-2 shadow-md">
+                <h2 className="border-b-4 border-indigo-600 bg-indigo-600/20 p-1 text-2xl font-bold">
+                    {metadata.title}
+                </h2>
+                <div className="mt-3 flex items-center space-x-2">
+                    <Timer />
+                    <p>作成日時：{metadata.datetime}</p>
+                </div>
+            </div>
+            <div className="prose">
+                <Post />
+            </div>
+        </>
+    );
 }
 
 export async function generateStaticParams() {

app/globals.css

@@ -1 +1,2 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";