add blog editor

src/routes/blog/[slug]/edit/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { resolve } from '$app/paths';
+
+	let { data, form } = $props();
+
+	let title = $state(data.blogArticle.title);
+	let content = $state(data.blogArticle.content ?? '');
+	let saving = $state(false);
+</script>
+
+<svelte:head><title>Editing {data.blogArticle.title}</title></svelte:head>
+
+<div class="mx-auto max-w-2xl px-4 py-8">
+	<div class="mb-4 flex items-center justify-between">
+		<h1 class="text-xl font-bold">
+			Editing article
+			<span
+				class="ml-2 rounded px-2 py-0.5 text-xs uppercase {data.blogArticle.status === 'published'
+					? 'bg-green-100 text-green-700'
+					: 'bg-orange-100 text-orange-700'}">{data.blogArticle.status}</span
+			>
+		</h1>
+		<a href={resolve('/blog/[slug]', { slug: data.blogArticle.slug })} class="text-sm underline"
+			>View</a
+		>
+	</div>
+
+	{#if form?.message}
+		<p class="mb-3 text-sm text-red-500">{form.message}</p>
+	{/if}
+
+	<form
+		method="POST"
+		action="?/save"
+		use:enhance={() => {
+			saving = true;
+			return async ({ update }) => {
+				await update();
+				saving = false;
+			};
+		}}
+		class="flex flex-col gap-3"
+	>
+		<input
+			name="title"
+			bind:value={title}
+			required
+			class="rounded border border-gray-300 px-3 py-2 text-lg font-bold outline-none"
+		/>
+		<textarea
+			name="content"
+			bind:value={content}
+			rows="20"
+			class="rounded border border-gray-300 px-3 py-2 font-mono text-sm outline-none"></textarea>
+
+		<div class="flex justify-end gap-2">
+			<button
+				type="submit"
+				disabled={saving}
+				class="rounded bg-gray-800 px-4 py-2 text-sm font-bold text-white disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
+				>Save draft</button
+			>
+			<button
+				type="submit"
+				formaction="?/publish"
+				disabled={saving}
+				class="rounded bg-green-700 px-4 py-2 text-sm font-bold text-white disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
+				>Publish</button
+			>
+		</div>
+	</form>
+</div>