From 5a5a8033dab6d701cd6d380d524486ca227ed48a Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 12 Nov 2024 19:23:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0SnippetShowForm?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=BF=E6=8D=A2=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=BA=E5=8F=AF=E7=BC=96=E8=BE=91=E7=9A=84?=
 =?UTF-8?q?Monaco=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/snippets/[id]/page.tsx       | 12 ++++++++----
 src/components/snippet-show-form.tsx | 22 ++++++++++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/components/snippet-show-form.tsx

diff --git a/src/app/snippets/[id]/page.tsx b/src/app/snippets/[id]/page.tsx
index 4719919..643f0be 100644
--- a/src/app/snippets/[id]/page.tsx
+++ b/src/app/snippets/[id]/page.tsx
@@ -2,6 +2,7 @@ import { db } from "@/db";
 import Link from "next/link";
 import * as actions from "@/actions";
 import { notFound } from "next/navigation";
+import SnippetShowForm from "@/components/snippet-show-form";
 
 interface SnippetShowPageProps {
   params: Promise<{
@@ -29,7 +30,10 @@ export default async function SnippetShowPage(props: SnippetShowPageProps) {
     <div>
       <div className="flex m-4 justify-between items-center">
         <h1 className="text-xl font-bold">{snippet.title}</h1>
-        <div className="flex gap-4">
+        <div className="flex gap-2">
+          <Link href="/" className="p-2 border rounded">
+            Home
+          </Link>
           <Link
             href={`/snippets/${snippet.id}/edit`}
             className="p-2 border rounded"
@@ -41,9 +45,9 @@ export default async function SnippetShowPage(props: SnippetShowPageProps) {
           </form>
         </div>
       </div>
-      <pre className="p-3 border rounded bg-gray-200 border-gray-200">
-        <code>{snippet.code}</code>
-      </pre>
+      <div>
+        <SnippetShowForm snippet={snippet} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/snippet-show-form.tsx b/src/components/snippet-show-form.tsx
new file mode 100644
index 0000000..b31a665
--- /dev/null
+++ b/src/components/snippet-show-form.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Snippet } from "@prisma/client";
+import { Editor } from "@monaco-editor/react";
+
+interface SnippetShowFormProps {
+  snippet: Snippet;
+}
+
+export default function SnippetShowForm({ snippet }: SnippetShowFormProps) {
+  return (
+    <div>
+      <Editor
+        height="40vh"
+        theme="vs-light"
+        language="c"
+        defaultValue={snippet.code}
+        options={{ minimap: { enabled: false } }}
+      />
+    </div>
+  );
+}