feat: 添加返回和主页链接

This commit is contained in:
ngc2207 2024-11-12 20:13:03 +08:00
parent 57c7c09ca4
commit 13d40854ca
3 changed files with 54 additions and 33 deletions

View File

@ -1,4 +1,5 @@
import { db } from "@/db"; import { db } from "@/db";
import Link from "next/link";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import SnippetEditForm from "@/components/snippet-edit-form"; import SnippetEditForm from "@/components/snippet-edit-form";
@ -19,8 +20,18 @@ export default async function SnippetEditPage(props: SnippetEditPageProps) {
return notFound(); return notFound();
} }
return ( return (
<div>
<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> <div>
<SnippetEditForm snippet={snippet} /> <SnippetEditForm snippet={snippet} />
</div> </div>
</div>
); );
} }

View File

@ -1,9 +1,10 @@
"use client"; "use client";
import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import * as actions from "@/actions"; import * as actions from "@/actions";
import SnippetEditor from "@/components/snippet-create-form";
import { useActionState } from "react"; import { useActionState } from "react";
import SnippetEditor from "@/components/snippet-create-form";
export default function SnippetCreatePage() { export default function SnippetCreatePage() {
const [formState, action] = useActionState(actions.createSnippet, { const [formState, action] = useActionState(actions.createSnippet, {
@ -14,8 +15,16 @@ export default function SnippetCreatePage() {
setCode(newCode); setCode(newCode);
}; };
return ( return (
<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>
<form action={action}> <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">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<label className="w-12" htmlFor="title"> <label className="w-12" htmlFor="title">
@ -46,5 +55,6 @@ export default function SnippetCreatePage() {
</button> </button>
</div> </div>
</form> </form>
</div>
); );
} }

View File

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