function MainComponent() { const [sourceText, setSourceText] = React.useState(''); const [translatedText, setTranslatedText] = React.useState(''); const [targetLanguage, setTargetLanguage] = React.useState('en'); const [charCount, setCharCount] = React.useState(0); const translateText = async ()=>{ try { const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: sourceText, target: targetLanguage }) }); const data = await response.json(); setTranslatedText(data.data.translations[0].translatedText); } catch (error) {} }; React.useEffect(()=>{ if (sourceText) { translateText(); } setCharCount(sourceText.length); }, [ sourceText, targetLanguage ]); const borderStyle = "border border-[#ffffff40]"; const charCountDisplay = `${charCount}/500`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center bg-[#121212] min-h-screen p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "languages", value: targetLanguage, onChange: (e)=>setTargetLanguage(e.target.value), className: "bg-[#202020] text-white py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "ru", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Russian"), /*#__PURE__*/ React.createElement("option", { value: "la", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Latin"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "German"))), /*#__PURE__*/ React.createElement("div", { className: "flex w-full max-w-4xl space-x-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "sourceText", placeholder: "Digite em português...", className: `w-full p-3 h-[200px] bg-[#202020] text-white rounded font-roboto ${borderStyle}`, value: sourceText, onChange: (e)=>setSourceText(e.target.value), __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white text-right font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, charCountDisplay)), /*#__PURE__*/ React.createElement("textarea", { name: "translatedText", placeholder: "Tradução...", className: `w-full md:w-1/2 p-3 h-[200px] bg-[#202020] text-white rounded font-roboto ${borderStyle}`, value: translatedText, disabled: true, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }))); }