first commit

resources/js/pages/posts/Create.svelte

@@ -0,0 +1,102 @@
+<script module lang="ts">
+    import { index as postsIndex, create as postsCreate } from '@/routes/posts';
+
+    export const layout = {
+        breadcrumbs: [
+            { title: 'Posts', href: postsIndex() },
+            { title: 'Create Post', href: postsCreate() },
+        ],
+    };
+</script>
+
+<script lang="ts">
+    import { useForm } from '@inertiajs/svelte';
+    import { store } 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';
+
+    const form = useForm({
+        title: '',
+        slug: '',
+        content: '',
+        status: 'draft',
+    });
+
+    let slugManuallyEdited = false;
+
+    function handleTitleInput(e: Event) {
+        const target = e.target as HTMLInputElement;
+        form.title = target.value;
+        if (!slugManuallyEdited) {
+            form.slug = target.value
+                .toLowerCase()
+                .replace(/[\s_]+/g, '-')
+                .replace(/[^\w-]+/g, '');
+        }
+    }
+
+    function submit(e: Event) {
+        e.preventDefault();
+        form.post(store.url());
+    }
+</script>
+
+<AppHead title="Create Post" />
+
+<div class="w-full space-y-6 p-4">
+    <h1 class="text-2xl font-bold tracking-tight">Create 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}
+                oninput={handleTitleInput}
+                required
+            />
+            <InputError message={form.errors.title} />
+        </div>
+
+        <div class="grid gap-2">
+            <Label for="slug">Slug</Label>
+            <Input
+                id="slug"
+                value={form.slug}
+                oninput={() => (slugManuallyEdited = true)}
+                required
+            />
+            <InputError message={form.errors.slug} />
+        </div>
+
+        <div class="grid gap-2">
+            <Label for="content">Content</Label>
+            <textarea
+                id="content"
+                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}>Create Post</Button>
+    </form>
+</div>