import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { ConfigurableTable } from '@/components/ui/configurable-table'; import { PaginationLinks } from '@/components/ui/pagination-links'; import { AdminLayout } from '@/layouts/admin-layout'; import type { PaginatedData } from '@/types'; type BlogArticleRow = { id: number; title: string; slug: string; status: string; category: string | null; author: string | null; tags_count: number; media_count: number; published_at: string | null; updated_at: string | null; }; type BlogArticleIndexProps = { articles: PaginatedData; filters: { search: string; status: string; }; }; export default function BlogArticleIndex({ articles, filters, }: BlogArticleIndexProps) { const [search, setSearch] = useState(filters.search || ''); const [status, setStatus] = useState(filters.status || ''); const submitFilters = (event: React.FormEvent) => { event.preventDefault(); router.get('/admin/blog-articles', buildParams({ search, status }), { preserveState: true, preserveScroll: true, replace: true, }); }; const deleteArticle = (id: number) => { if (!window.confirm('Delete this blog article?')) { return; } router.delete(`/admin/blog-articles/${id}`); }; return (

Blog Articles

Manage guides, diagnostics, and SEO content.

Add Article
setSearch(event.target.value)} placeholder="Search by title, slug, or excerpt" className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />
{articles.data.map((article) => (

{article.title}

{article.slug}

Status: {article.status}

Category: {article.category || '-'}

Author: {article.author || '-'}

Tags: {article.tags_count}

Media: {article.media_count}

Published: {article.published_at || '-'}

))}
{articles.data.map((article) => ( ))}
Article Status Category Author Media Actions

{article.title}

{article.slug}

{article.status} {article.category || '-'} {article.author || '-'} {article.media_count}

Showing {articles.from || 0} to {articles.to || 0} of{' '} {articles.total} articles

); } function Actions({ id, onDelete, }: { id: number; onDelete: (id: number) => void; }) { return (
Edit
); } function buildParams(filters: { search: string; status: string }) { const params: Record = {}; if (filters.search !== '') { params.search = filters.search; } if (filters.status !== '') { params.status = filters.status; } return params; }