← Kembali / Tambah Buku

📚 Tambah Buku Baru

setData("judul", e.target.value) } className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none" placeholder="Masukkan judul buku" />

setData("pengarang", e.target.value) } className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none" placeholder="Nama pengarang" /> setData("penerbit", e.target.value) } className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none" placeholder="Nama penerbit" />

setData("tahun_terbit", e.target.value) } className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none" placeholder="2024" min="1900" max="2099" /> setData("isbn", e.target.value) } className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none" placeholder="978-xxx-xxx-xxx" />

setData("stok", e.target.value) } className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none" min="0" />

setData("sinopsis", e.target.value)
                                }
                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                rows={4}
                                placeholder="Tulis sinopsis buku..."
                            />
                        </FormField>

<div className="flex gap-3 pt-4">
                            <button
                                type="submit"
                                disabled={processing}
                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
                            >
                                {processing ? "Menyimpan..." : "💾 Simpan Buku"}
                            </button>
                            <Link
                                href="/buku"
                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
                            >
                                Batal
                            </Link>
                        </div>
                    </form>
                </div>
            </div>
        </MainLayout>
    );
}

function FormField({ label, error, children }) {
    return (
        <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
                {label}
            </label>
            {children}
            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
        </div>
    );
}