function MainComponent() { const [japaneseText, setJapaneseText] = React.useState(""); const [englishText, setEnglishText] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleTranslation = async ()=>{ setLoading(true); const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ q: japaneseText, target: 'en' }) }); const result = await response.json(); const translation = result.data.translations[0].translatedText || "Translation failed."; setEnglishText(translation); setLoading(false); await fetch('/api/db/data_center', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'INSERT INTO `translations` (`input`, `output`) VALUES (?, ?)', values: [ japaneseText, translation ] }) }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-green-500 py-4 text-center", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "和英翻訳アプリ")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center mt-8 w-full px-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-[500px] bg-white p-6 shadow-md rounded-md", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", htmlFor: "japanese-input", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "日本語"), /*#__PURE__*/ React.createElement("textarea", { id: "japanese-input", name: "japanese-input", className: "w-full h-[150px] p-2 border border-gray-300 rounded-md mb-4", value: japaneseText, onChange: (e)=>setJapaneseText(e.target.value), __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-crimson-text", htmlFor: "english-output", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "英語"), /*#__PURE__*/ React.createElement("textarea", { id: "english-output", name: "english-output", className: "w-full h-[150px] p-2 border border-gray-300 rounded-md mb-4", readOnly: true, value: englishText, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full bg-green-500 text-white font-roboto py-2 px-4 rounded-md", onClick: handleTranslation, disabled: loading, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, loading ? '翻訳中...' : '翻訳')))); }