first commit

resources/js/pages/posts/Edit.svelte

@@ -0,0 +1,81 @@
+<script module lang="ts">
+    import { index as postsIndex } from '@/routes/posts';
+
+    export const layout = {
+        breadcrumbs: [
+            { title: 'Posts', href: postsIndex() },
+            { title: 'Edit Post', href: postsIndex() },
+        ],
+    };
+</script>
+
+<script lang="ts">
+    import { useForm } from '@inertiajs/svelte';
+    import { update } from '@/actions/App/Http/Controllers/PostController';
+    import AppHead from '@/components/AppHead.svelte';
+    import InputError from '@/components/InputError.svelte';
+    import { Button } from '@/components/ui/button';
+    import { Input } from '@/components/ui/input';
+    import { Label } from '@/components/ui/label';
+
+    let { post = $bindable() } = $props();
+
+    const form = useForm({
+        title: $state.snapshot(post).title,
+        slug: $state.snapshot(post).slug,
+        content: $state.snapshot(post).content,
+        status: $state.snapshot(post).status,
+    });
+
+    function submit(e: Event) {
+        e.preventDefault();
+        form.put(update.url(post.slug));
+    }
+</script>
+
+<AppHead title="Edit Post" />
+
+<div class="w-full space-y-6 p-4">
+    <h1 class="text-2xl font-bold tracking-tight">Edit Post</h1>
+
+    <form onsubmit={submit} class="space-y-6">
+        <div class="grid gap-2">
+            <Label for="title">Title</Label>
+            <Input id="title" value={form.title} required />
+            <InputError message={form.errors.title} />
+        </div>
+
+        <div class="grid gap-2">
+            <Label for="slug">Slug</Label>
+            <Input id="slug" value={form.slug} required />
+            <InputError message={form.errors.slug} />
+        </div>
+
+        <div class="grid gap-2">
+            <Label for="content">Content</Label>
+            <textarea
+                id="content"
+                bind:value={form.content}
+                rows="10"
+                required
+                class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            ></textarea>
+            <InputError message={form.errors.content} />
+        </div>
+
+        <div class="grid gap-2">
+            <Label for="status">Status</Label>
+            <select
+                id="status"
+                bind:value={form.status}
+                class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+                <option value="draft">Draft</option>
+                <option value="publish">Publish</option>
+            </select>
+            <InputError message={form.errors.status} />
+        </div>
+
+        <Button type="submit" disabled={form.processing}>Update Post</Button>
+    </form>
+</div>