124 lines
4.6 KiB
Svelte
124 lines
4.6 KiB
Svelte
<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>
|