import { Head, useForm } from '@inertiajs/react'; import type { FormEvent } from 'react'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import { dashboard } from '@/routes/admin'; import { index, update } from '@/routes/admin/stats'; type Stat = { id: number; label: string; value: string }; export default function Stats({ stats }: { stats: Stat[] }) { const { data, setData, put, processing, errors } = useForm({ stats }); const change = (index: number, field: 'label' | 'value', value: string) => setData( 'stats', data.stats.map((stat, i) => i === index ? { ...stat, [field]: value } : stat, ), ); const submit = (event: FormEvent) => { event.preventDefault(); put(update.url(), { preserveScroll: true }); }; const errorFor = (index: number, field: string) => (errors as Record)[ `stats.${index}.${field}` ]; return ( <>
{data.stats.map((stat, i) => (
change( i, 'value', event.target.value, ) } className="text-lg font-semibold" required />
change( i, 'label', event.target.value, ) } required />
))}
); } Stats.layout = { breadcrumbs: [ { title: 'Admin', href: dashboard() }, { title: 'Statistics', href: index() }, ], };