import { Head, Link, router, usePage } from '@inertiajs/react'; import { Pencil, Plus, Trash2 } from 'lucide-react'; import { PaginationControls, type PaginatedData, SortableHeader, type TableFilters, } from '@/components/data-table-controls'; import Heading from '@/components/heading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import type { Auth } from '@/types'; type Author = { id: number; name: string; }; type PostItem = { id: number; title: string; slug: string; status: 'draft' | 'published'; published_at: string | null; created_at: string; author: Author | null; categories: { id: number; name: string; }[]; tags: { id: number; name: string; }[]; }; type PageProps = { auth: Auth; posts: PaginatedData; filters: TableFilters; }; export default function PostsIndex({ posts, filters }: PageProps) { const { auth } = usePage().props; const can = (permission: string) => auth.permissions.includes(permission); const destroy = (post: PostItem) => { if (!window.confirm(`Delete ${post.title}?`)) { return; } router.delete(`/posts/${post.id}`, { preserveScroll: true }); }; return ( <>

{can('posts.create') && ( )}

Post Status Published {posts.data.map((post) => ( ))}

Author	Categories	Tags	Actions
{post.title} {post.slug}	{post.author?.name ?? 'No author'}	{post.categories.length ? ( post.categories.map( (category) => ( {category.name} ), ) ) : ( No categories )}	{post.tags.length ? ( post.tags.map((tag) => ( {tag.name} )) ) : ( No tags )}	{post.status}	{post.published_at ? new Date( post.published_at, ).toLocaleDateString() : 'Not scheduled'}	{can('posts.update') && ( )} {can('posts.delete') && ( )}

); } PostsIndex.layout = { breadcrumbs: [ { title: 'Posts', href: '/posts', }, ], };