function MainComponent() { const [transcript, setTranscript] = React.useState(""); const [translatedText, setTranslatedText] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleTranscriptChange = (e)=>{ setTranscript(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: transcript, target: 'ja', source: 'en' }) }); const data = await response.json(); setTranslatedText(data.data.translations[0].translatedText); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-4 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "音声文字起こしアプリ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "grid-transcript", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "音声テキスト"), /*#__PURE__*/ React.createElement("textarea", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "grid-transcript", name: "transcript", placeholder: "YouTubeなどの音声を英語で入力してください", value: transcript, onChange: handleTranscriptChange, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, !loading && translatedText && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "翻訳されたテキスト:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, translatedText))), loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "Loading...")); }