function MainComponent({ name, address, onNameChange, onAddressChange, onSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-[400px] mx-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: onSubmit, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: name, onChange: onNameChange, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#010101] focus:border-[#010101] font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "address", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", id: "address", value: address, onChange: onAddressChange, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#010101] focus:border-[#010101] font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 w-full bg-[#010101] text-white py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-roboto hover:bg-[#121212] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#010101]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "OK"))); } function StoryComponent() { const [name, setName] = React.useState(''); const [address, setAddress] = React.useState(''); const handleNameChange = (e)=>setName(e.target.value); const handleAddressChange = (e)=>setAddress(e.target.value); const handleSubmit = async (e)=>{ e.preventDefault(); await fetch('/api/db/contacts-62', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `contacts` (name, address) VALUES (?, ?)", values: [ name, address ] }) }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { name: name, address: address, onNameChange: handleNameChange, onAddressChange: handleAddressChange, onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); }