import { Head, Link, router, useForm } from '@inertiajs/react'; import type { FormEvent } from 'react'; type Vehicle = { id: number; make: string; model: string; year: number | null; engine: string | null; engine_code: string | null; transmission: string | null; vin: string | null }; export default function CustomerVehicles({ vehicles }: { vehicles: Vehicle[] }) { const { data, setData, transform, post, processing, errors } = useForm({ make: '', model: '', year: '', engine: '', engine_code: '', transmission: '', vin: '' }); function submit(event: FormEvent) { event.preventDefault(); transform((values) => ({ ...values, year: values.year || null })); post('/account/vehicles', { preserveScroll: true }); } return ( <>
Account

Saved vehicles

setData('make', event.target.value)} /> setData('model', event.target.value)} /> setData('year', event.target.value)} /> setData('engine', event.target.value)} /> setData('engine_code', event.target.value)} /> setData('transmission', event.target.value)} /> setData('vin', event.target.value)} />
View compatible parts for saved vehicles {vehicles.map((vehicle) => (

{vehicle.make} {vehicle.model}

{vehicle.year ?? 'Any year'} · {vehicle.engine_code ?? vehicle.engine ?? 'Any engine'} · {vehicle.transmission ?? 'Any transmission'}

))}
); } function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) { return ; }