feat: 添加SnippetEditor用于创建代码片段

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 ? (

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>
+  );
+}