Modern Fullstack dengan Laravel 11, Inertia.js, dan React

import React from 'react';
import { useForm } from '@inertiajs/react';
 
export default function CreateGigForm() {
    const { data, setData, post, processing, errors } = useForm({
        title: '',
        budget: '',
        description: '',
    });
 
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post('/gigs/store', {
            preserveScroll: true,
        });
    };
 
    return (
        <form onSubmit={handleSubmit} className="space-y-4 max-w-lg">
            <div>
                <label className="block text-sm font-medium">Judul Pekerjaan</label>
                <input
                    type="text"
                    value={data.title}
                    onChange={(e) => setData('title', e.target.value)}
                    className="w-full px-3 py-2 border rounded-lg bg-card"
                />
                {errors.title && <span className="text-red-500 text-xs">{errors.title}</span>}
            </div>
            <button disabled={processing} className="px-4 py-2 bg-primary text-white rounded-lg">
                {processing ? 'Menyimpan...' : 'Publikasikan Gig'}
            </button>
        </form>
    );
}