first commit

resources/js/pages/posts/Index.svelte

@@ -0,0 +1,123 @@
+<script module lang="ts">
+    import { index as postsIndex } from '@/routes/posts';
+
+    export const layout = {
+        breadcrumbs: [
+            {
+                title: 'Posts',
+                href: postsIndex(),
+            },
+        ],
+    };
+</script>
+
+<script lang="ts">
+    import { Link, router } from '@inertiajs/svelte';
+    import {
+        create as postsCreate,
+        edit as postsEdit,
+        destroy as postsDestroy,
+    } from '@/routes/posts';
+    import AppHead from '@/components/AppHead.svelte';
+    import { Button } from '@/components/ui/button';
+    import { Badge } from '@/components/ui/badge';
+    import { toUrl } from '@/lib/utils';
+
+    let { posts } = $props();
+
+    function deletePost(post: any) {
+        if (confirm(`Are you sure you want to delete "${post.title}"?`)) {
+            router.delete(postsDestroy.url(post.slug));
+        }
+    }
+</script>
+
+<AppHead title="Posts" />
+
+<div class="w-full space-y-6 p-4">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-bold tracking-tight">Posts</h1>
+            <p class="text-sm text-muted-foreground">Manage your blog posts</p>
+        </div>
+        <Button asChild>
+            {#snippet children(props)}
+                <Link
+                    {...props}
+                    href={toUrl(postsCreate())}
+                    class={props.class}
+                >
+                    Create Post
+                </Link>
+            {/snippet}
+        </Button>
+    </div>
+
+    <div class="rounded-lg border">
+        <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+                <thead>
+                    <tr class="border-b bg-muted/50">
+                        <th class="px-4 py-3 text-left font-medium">Title</th>
+                        <th class="px-4 py-3 text-left font-medium">Slug</th>
+                        <th class="px-4 py-3 text-left font-medium">Status</th>
+                        <th class="px-4 py-3 text-right font-medium">Actions</th
+                        >
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each posts.data as post (post.id)}
+                        <tr
+                            class="border-b transition-colors hover:bg-muted/50"
+                        >
+                            <td class="px-4 py-3 font-medium">{post.title}</td>
+                            <td class="px-4 py-3 text-muted-foreground"
+                                >{post.slug}</td
+                            >
+                            <td class="px-4 py-3">
+                                <Badge
+                                    variant={post.status === 'publish'
+                                        ? 'default'
+                                        : 'secondary'}
+                                >
+                                    {post.status}
+                                </Badge>
+                            </td>
+                            <td class="px-4 py-3 text-right">
+                                <div
+                                    class="flex items-center justify-end gap-2"
+                                >
+                                    <Button variant="outline" size="sm" asChild>
+                                        {#snippet children(props)}
+                                            <Link
+                                                {...props}
+                                                href={toUrl(
+                                                    postsEdit(post.slug),
+                                                )}
+                                                class={props.class}>Edit</Link
+                                            >
+                                        {/snippet}
+                                    </Button>
+                                    <Button
+                                        variant="destructive"
+                                        size="sm"
+                                        onclick={() => deletePost(post)}
+                                        >Delete</Button
+                                    >
+                                </div>
+                            </td>
+                        </tr>
+                    {:else}
+                        <tr>
+                            <td
+                                colspan="4"
+                                class="px-4 py-8 text-center text-muted-foreground"
+                                >No posts found.</td
+                            >
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>