From 13d40854ca82c8ee7b041f2b98fe90ab2d382c29 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 12 Nov 2024 20:13:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E5=92=8C=E4=B8=BB=E9=A1=B5=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/snippets/[id]/edit/page.tsx  | 13 ++++-
 src/app/snippets/new/page.tsx        | 72 ++++++++++++++++------------
 src/components/snippet-edit-form.tsx |  2 +-
 3 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/app/snippets/[id]/edit/page.tsx b/src/app/snippets/[id]/edit/page.tsx
index 1608823..867b1f7 100644
--- a/src/app/snippets/[id]/edit/page.tsx
+++ b/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>
   );
 }
diff --git a/src/app/snippets/new/page.tsx b/src/app/snippets/new/page.tsx
index 1341035..f1b3628 100644
--- a/src/app/snippets/new/page.tsx
+++ b/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}>
-      <h3 className="font-bold m-3">Create a Snippet</h3>
-      <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 m-4 justify-between items-center">
+        <h1 className="text-xl font-bold">Create a Snippet</h1>
+        <div className="flex gap-2">
+          <Link href="/" className="p-2 border rounded">
+            Home
+          </Link>
         </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>
   );
 }
diff --git a/src/components/snippet-edit-form.tsx b/src/components/snippet-edit-form.tsx
index 060c0cc..ac02c7f 100644
--- a/src/components/snippet-edit-form.tsx
+++ b/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>