import { Head, Link, router } from '@inertiajs/react'; import type { FormEvent } from 'react'; import { useState } from 'react'; type Product = { id: number; name: string; slug: string; sku: string; condition: string; price: string; discount_price: string | null; stock_quantity: number; reserved_quantity: number; brand: { name: string } | null; category: { name: string } | null; images: { path: string; alt_text: string | null; is_main: boolean }[]; }; type Pagination = { data: T[]; links: { url: string | null; label: string; active: boolean }[]; }; type Filters = { search: string; make: string; model: string; year: number | null; engine: string; transmission: string; }; type VehicleMake = { id: number; name: string; slug: string; models: { id: number; name: string; slug: string }[]; }; export default function ProductIndex({ products, filters, vehicleMakes, }: { products: Pagination; filters: Filters; vehicleMakes: VehicleMake[]; }) { const [search, setSearch] = useState(filters.search ?? ''); const [make, setMake] = useState(filters.make ?? ''); const [model, setModel] = useState(filters.model ?? ''); const [year, setYear] = useState(filters.year ? String(filters.year) : ''); const [engine, setEngine] = useState(filters.engine ?? ''); const [transmission, setTransmission] = useState( filters.transmission ?? '', ); function submit(event: FormEvent) { event.preventDefault(); router.get( '/parts', { search, make, model, year, engine, transmission }, { preserveState: true, preserveScroll: true }, ); } const modelOptions = vehicleMakes.find((vehicleMake) => vehicleMake.slug === make)?.models ?? []; return ( <>

Auto parts catalog

setSearch(event.target.value) } placeholder="Search by product, SKU, OEM or alternative number" className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-600 focus:ring-cyan-600" /> setYear(event.target.value)} placeholder="Year" type="number" min="1900" max="2100" className="rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-600 focus:ring-cyan-600" /> setEngine(event.target.value) } placeholder="Engine code" className="rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-600 focus:ring-cyan-600" />
{products.data.map((product) => { const image = product.images.find( (item) => item.is_main, ); return (
{image ? ( { ) : ( No image )}

{product.brand?.name ?? 'Brand'}

{product.name}

SKU {product.sku}

{product.discount_price ?? product.price}

{product.stock_quantity - product.reserved_quantity > 0 ? 'In stock' : 'Out of stock'}

); })}
); }