76 lines
2.0 KiB
Svelte
76 lines
2.0 KiB
Svelte
<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-body text-base leading-relaxed text-gray-900 outline-none"
|
|
></textarea>
|
|
<p class="-mt-2 text-xs text-gray-400">Supports Markdown formatting.</p>
|
|
|
|
<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>
|