import { Head, Link, router } from '@inertiajs/react'; import type { FormEvent } from 'react'; import { useState } from 'react'; type Category = { id: number; name: string; slug: string; system_type: string | null; is_active: boolean; products_count: number; parent: { name: string } | null }; type Pagination = { data: T[]; links: { url: string | null; label: string; active: boolean }[] }; export default function CategoriesIndex({ categories, filters }: { categories: Pagination; filters: { search: string } }) { const [search, setSearch] = useState(filters.search ?? ''); function submit(event: FormEvent) { event.preventDefault(); router.get('/admin/categories', { search }, { preserveState: true }); } return ( <>

Admin

Categories

Add category
setSearch(event.target.value)} placeholder="Search categories" />
{categories.data.map((category) => (

{category.name}

{category.slug} · {category.parent?.name ?? 'Top level'} · {category.system_type ?? 'No system'} · {category.products_count} products · {category.is_active ? 'active' : 'inactive'}

Edit
))}
); }