feat: 添加返回和主页链接

src/app/snippets/[id]/edit/page.tsx

@@ -1,4 +1,5 @@
 import { db } from "@/db";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import SnippetEditForm from "@/components/snippet-edit-form";
 
@@ -20,7 +21,17 @@ export default async function SnippetEditPage(props: SnippetEditPageProps) {
   }
   return (
     <div>
-      <SnippetEditForm snippet={snippet} />
+      <div className="flex m-4 justify-between items-center">
+        <h1 className="text-xl font-bold">{snippet.title}</h1>
+        <div className="flex gap-2">
+          <Link href={`/snippets/${snippet.id}`} className="p-2 border rounded">
+            Back
+          </Link>
+        </div>
+      </div>
+      <div>
+        <SnippetEditForm snippet={snippet} />
+      </div>
     </div>
   );
 }

src/app/snippets/new/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import Link from "next/link";
 import { useState } from "react";
 import * as actions from "@/actions";
-import SnippetEditor from "@/components/snippet-create-form";
 import { useActionState } from "react";
+import SnippetEditor from "@/components/snippet-create-form";
 
 export default function SnippetCreatePage() {
   const [formState, action] = useActionState(actions.createSnippet, {
@@ -14,37 +15,46 @@ export default function SnippetCreatePage() {
     setCode(newCode);
   };
   return (
-    <form action={action}>
+    <div>
-      <h3 className="font-bold m-3">Create a Snippet</h3>
+      <div className="flex m-4 justify-between items-center">
-      <div className="flex flex-col gap-4">
+        <h1 className="text-xl font-bold">Create a Snippet</h1>
-        <div className="flex flex-col gap-4">
+        <div className="flex gap-2">
-          <label className="w-12" htmlFor="title">
+          <Link href="/" className="p-2 border rounded">
-            Title
+            Home
-          </label>
+          </Link>
-          <input
-            name="title"
-            className="border rounded p-2 w-full"
-            id="title"
-          />
         </div>
-        <div className="flex flex-col gap-4">
-          <label className="w-12" htmlFor="title">
-            Code
-          </label>
-          <input type="hidden" name="code" value={code} />
-          <SnippetEditor code={code} onCodeChange={handleCodeChange} />
-        </div>
-
-        {formState.message ? (
-          <div className="my-2 p-2 bg-red-200 border rounded border-red-400">
-            {formState.message}
-          </div>
-        ) : null}
-
-        <button type="submit" className="rounded p-2 bg-blue-200">
-          Create
-        </button>
       </div>
-    </form>
+      <form action={action}>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4">
+            <label className="w-12" htmlFor="title">
+              Title
+            </label>
+            <input
+              name="title"
+              className="border rounded p-2 w-full"
+              id="title"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <label className="w-12" htmlFor="title">
+              Code
+            </label>
+            <input type="hidden" name="code" value={code} />
+            <SnippetEditor code={code} onCodeChange={handleCodeChange} />
+          </div>
+
+          {formState.message ? (
+            <div className="my-2 p-2 bg-red-200 border rounded border-red-400">
+              {formState.message}
+            </div>
+          ) : null}
+
+          <button type="submit" className="rounded p-2 bg-blue-200">
+            Create
+          </button>
+        </div>
+      </form>
+    </div>
   );
 }

src/components/snippet-edit-form.tsx

@@ -28,7 +28,7 @@ export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
         options={{ minimap: { enabled: false } }}
         onChange={handleEditorChange}
       />
-      <form action={editSnippetAction}>
+      <form action={editSnippetAction} className="flex justify-end pr-4">
         <button type="submit" className="p-2 border rounded">
           Save
         </button>