import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; type Service = { id: number; name: string; slug: string; color: string; }; export default function OptionsPage() { const { services } = usePage().props as { services: Service[] }; const [rows, setRows] = useState(services); const updateColor = (id: number, color: string) => { setRows((prev) => prev.map((s) => (s.id === id ? { ...s, color } : s)) ); }; const save = () => { router.put( '/options/service-colors', { services: rows }, { preserveScroll: true } ); }; return ( <>

Service Colors

{rows.map((service) => (

{service.name}

updateColor(service.id, e.target.value) } style={{ width: 60, height: 36, border: 'none', background: 'none', cursor: 'pointer', }} />

))}

); }