From f20e9db186920a6eaf70c27fcb31e33ddfbc6c9f Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 12 Nov 2024 19:51:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0SnippetEditor?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E5=88=9B=E5=BB=BA=E4=BB=A3=E7=A0=81=E7=89=87?=
 =?UTF-8?q?=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/snippets/new/page.tsx          | 14 ++++++++----
 src/components/snippet-create-form.tsx | 30 ++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/components/snippet-create-form.tsx

diff --git a/src/app/snippets/new/page.tsx b/src/app/snippets/new/page.tsx
index 0595ad0..1341035 100644
--- a/src/app/snippets/new/page.tsx
+++ b/src/app/snippets/new/page.tsx
@@ -1,18 +1,23 @@
 "use client";
 
+import { useState } from "react";
 import * as actions from "@/actions";
+import SnippetEditor from "@/components/snippet-create-form";
 import { useActionState } from "react";
 
 export default function SnippetCreatePage() {
   const [formState, action] = useActionState(actions.createSnippet, {
     message: "",
   });
-
+  const [code, setCode] = useState("");
+  const handleCodeChange = (newCode: string = "") => {
+    setCode(newCode);
+  };
   return (
     <form action={action}>
       <h3 className="font-bold m-3">Create a Snippet</h3>
       <div className="flex flex-col gap-4">
-        <div className="flex gap-4">
+        <div className="flex flex-col gap-4">
           <label className="w-12" htmlFor="title">
             Title
           </label>
@@ -22,11 +27,12 @@ export default function SnippetCreatePage() {
             id="title"
           />
         </div>
-        <div className="flex gap-4">
+        <div className="flex flex-col gap-4">
           <label className="w-12" htmlFor="title">
             Code
           </label>
-          <input name="code" className="border rounded p-2 w-full" id="code" />
+          <input type="hidden" name="code" value={code} />
+          <SnippetEditor code={code} onCodeChange={handleCodeChange} />
         </div>
 
         {formState.message ? (
diff --git a/src/components/snippet-create-form.tsx b/src/components/snippet-create-form.tsx
new file mode 100644
index 0000000..ebe6a05
--- /dev/null
+++ b/src/components/snippet-create-form.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Editor } from "@monaco-editor/react";
+
+interface SnippetEditorProps {
+  code: string;
+  onCodeChange: (value: string) => void;
+}
+
+export default function SnippetEditor({
+  code,
+  onCodeChange,
+}: SnippetEditorProps) {
+  const handleEditorChange = (value: string = "") => {
+    onCodeChange(value);
+  };
+
+  return (
+    <div>
+      <Editor
+        height="40vh"
+        theme="vs-light"
+        language="c"
+        defaultValue={code}
+        options={{ minimap: { enabled: false } }}
+        onChange={handleEditorChange}
+      />
+    </div>
+  );
+}