function MainComponent() { const [outputMessage, setOutputMessage] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); const inputNumber = event.target.inputNumber.value; const response = await fetch('/api/simple-greeting-app-the-back-end-function', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ InputNumber: parseInt(inputNumber) }) }); const data = await response.json(); setOutputMessage(data.OutputMessage); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] min-h-screen flex flex-col items-center justify-center font-sans", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full text-center py-6 bg-[#1e3a8a] text-white", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Simple Greeting App")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center justify-center flex-grow w-full px-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center bg-white p-8 rounded-lg shadow-lg w-full max-w-[400px]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "inputNumber", className: "text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Choose a number"), /*#__PURE__*/ React.createElement("select", { name: "inputNumber", id: "inputNumber", className: "mb-4 p-2 border rounded w-full", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "5")), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-[400px]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "outputMessage", className: "text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Output Message"), /*#__PURE__*/ React.createElement("textarea", { name: "outputMessage", id: "outputMessage", value: outputMessage, readOnly: true, className: "w-full p-2 border rounded h-[100px]", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "w-full text-center py-4 bg-[#1e3a8a] text-white", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "This web app and its back-end system are generated from prompts written by ", /*#__PURE__*/ React.createElement("a", { href: "https://shuntsukamoto.created.app/", className: "underline", __source: { fileName: "", lineNumber: 41, columnNumber: 87 }, __self: this }, "Shun Tsukamoto"), "."))); }