import { Head, Link, router } from '@inertiajs/react'; import type { FormEvent } from 'react'; import { useState } from 'react'; type Brand = { id: number; name: string; slug: string; is_active: boolean; products_count: number }; type Pagination = { data: T[]; links: { url: string | null; label: string; active: boolean }[] }; export default function BrandsIndex({ brands, filters }: { brands: Pagination; filters: { search: string } }) { const [search, setSearch] = useState(filters.search ?? ''); function submit(event: FormEvent) { event.preventDefault(); router.get('/admin/brands', { search }, { preserveState: true }); } return ( <>
setSearch(event.target.value)} placeholder="Search brands" />
{brands.data.map((brand) => (

{brand.name}

{brand.slug} · {brand.products_count} products · {brand.is_active ? 'active' : 'inactive'}

Edit
))}
); } function Header({ title, href, label }: { title: string; href: string; label: string }) { return

Admin

{title}

{label}
; } function Pagination({ links }: { links: Pagination['links'] }) { return ; }