function SubmitButton({ text, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white font-roboto py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300", type: "submit", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function SubmitButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SubmitButton, { text: "Create Customer", onClick: ()=>alert('Customer Created'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SubmitButton, { text: "Submit", onClick: ()=>alert('Form Submitted'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SubmitButton, { text: "Register", onClick: ()=>alert('Registration Completed'), __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent({ onSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto p-6 bg-white shadow-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Create New Customer"), /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "name", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "name", name: "name", type: "text", placeholder: "John Doe", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "email", name: "email", type: "email", placeholder: "john@example.com", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "phone", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "phone", name: "phone", type: "text", placeholder: "(123) 456-7890", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "address", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Address"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-md", id: "address", name: "address", type: "text", placeholder: "123 Main St, Springfield", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(SubmitButton, { text: "Create Customer", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const handleSubmit = (e)=>{ e.preventDefault(); const data = new FormData(e.target); fetch('https://api.yourdatabase.com/ServiceDB', { method: 'POST', body: JSON.stringify({ name: data.get('name'), email: data.get('email'), phone: data.get('phone'), address: data.get('address') }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.json()).then((data)=>{ console.log('Success:', data); alert('Customer Created'); }).catch((error)=>{ console.error('Error:', error); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex items-center justify-center", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); }