function MainComponent() { const [textToTranslate, setTextToTranslate] = React.useState(''); const [translatedText, setTranslatedText] = React.useState(''); const [selectedLanguage, setSelectedLanguage] = React.useState('en'); const [loading, setLoading] = React.useState(false); const translateText = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: textToTranslate, target: selectedLanguage }) }); const data = await response.json(); setTranslatedText(data.data.translations[0].translatedText); } catch (error) { console.error('Failed to translate text:', error); } finally{ setLoading(false); } }; const handleTextChange = (event)=>{ setTextToTranslate(event.target.value); }; const handleLanguageChange = (event)=>{ setSelectedLanguage(event.target.value); }; const handleTranslateClick = ()=>{ if (!loading && textToTranslate.trim() !== '') { translateText(); } }; const animationStyle = loading ? { animation: 'pulse 2s infinite' } : {}; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 max-w-lg w-full space-y-6 rounded-2xl shadow-2xl bg-[#333]", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-4xl font-bold font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "🌐 Translator"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "languageSelect", value: selectedLanguage, onChange: handleLanguageChange, className: "w-1/3 p-3 rounded-lg bg-[#444] text-white focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "af", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Afrikaans"), /*#__PURE__*/ React.createElement("option", { value: "sq", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Albanian"), /*#__PURE__*/ React.createElement("option", { value: "am", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Amharic"), /*#__PURE__*/ React.createElement("option", { value: "ar", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Arabic"), /*#__PURE__*/ React.createElement("option", { value: "hy", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Armenian"), /*#__PURE__*/ React.createElement("option", { value: "az", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Azerbaijani"), /*#__PURE__*/ React.createElement("option", { value: "eu", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Basque"), /*#__PURE__*/ React.createElement("option", { value: "be", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Belarusian"), /*#__PURE__*/ React.createElement("option", { value: "bn", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Bengali"), /*#__PURE__*/ React.createElement("option", { value: "bs", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Bosnian"), /*#__PURE__*/ React.createElement("option", { value: "bg", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Bulgarian"), /*#__PURE__*/ React.createElement("option", { value: "ca", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Catalan"), /*#__PURE__*/ React.createElement("option", { value: "ceb", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Cebuano"), /*#__PURE__*/ React.createElement("option", { value: "ny", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Chichewa"), /*#__PURE__*/ React.createElement("option", { value: "zh-CN", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Chinese (Simplified)"), /*#__PURE__*/ React.createElement("option", { value: "zh-TW", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Chinese (Traditional)"), /*#__PURE__*/ React.createElement("option", { value: "co", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Corsican"), /*#__PURE__*/ React.createElement("option", { value: "hr", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Croatian"), /*#__PURE__*/ React.createElement("option", { value: "cs", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Czech"), /*#__PURE__*/ React.createElement("option", { value: "da", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Danish"), /*#__PURE__*/ React.createElement("option", { value: "nl", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Dutch"), /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "eo", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Esperanto"), /*#__PURE__*/ React.createElement("option", { value: "et", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Estonian"), /*#__PURE__*/ React.createElement("option", { value: "tl", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Filipino"), /*#__PURE__*/ React.createElement("option", { value: "fi", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Finnish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "fy", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Frisian"), /*#__PURE__*/ React.createElement("option", { value: "gl", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Galician"), /*#__PURE__*/ React.createElement("option", { value: "ka", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Georgian"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "el", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Greek"), /*#__PURE__*/ React.createElement("option", { value: "gu", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Gujarati"), /*#__PURE__*/ React.createElement("option", { value: "ht", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Haitian Creole"), /*#__PURE__*/ React.createElement("option", { value: "ha", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Hausa"), /*#__PURE__*/ React.createElement("option", { value: "haw", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Hawaiian"), /*#__PURE__*/ React.createElement("option", { value: "iw", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Hebrew"), /*#__PURE__*/ React.createElement("option", { value: "hi", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Hindi"), /*#__PURE__*/ React.createElement("option", { value: "hmn", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Hmong"), /*#__PURE__*/ React.createElement("option", { value: "hu", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Hungarian"), /*#__PURE__*/ React.createElement("option", { value: "is", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Icelandic"), /*#__PURE__*/ React.createElement("option", { value: "ig", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Igbo"), /*#__PURE__*/ React.createElement("option", { value: "id", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Indonesian"), /*#__PURE__*/ React.createElement("option", { value: "ga", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Irish"), /*#__PURE__*/ React.createElement("option", { value: "it", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Italian"), /*#__PURE__*/ React.createElement("option", { value: "ja", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "jw", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Javanese"), /*#__PURE__*/ React.createElement("option", { value: "kn", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Kannada"), /*#__PURE__*/ React.createElement("option", { value: "kk", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Kazakh"), /*#__PURE__*/ React.createElement("option", { value: "km", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Khmer"), /*#__PURE__*/ React.createElement("option", { value: "rw", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Kinyarwanda"), /*#__PURE__*/ React.createElement("option", { value: "ko", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Korean"), /*#__PURE__*/ React.createElement("option", { value: "ku", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Kurdish (Kurmanji)"), /*#__PURE__*/ React.createElement("option", { value: "ky", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Kyrgyz"), /*#__PURE__*/ React.createElement("option", { value: "lo", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Lao"), /*#__PURE__*/ React.createElement("option", { value: "la", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Latin"), /*#__PURE__*/ React.createElement("option", { value: "lv", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Latvian"), /*#__PURE__*/ React.createElement("option", { value: "lt", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Lithuanian"), /*#__PURE__*/ React.createElement("option", { value: "lb", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Luxembourgish"), /*#__PURE__*/ React.createElement("option", { value: "mk", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Macedonian"), /*#__PURE__*/ React.createElement("option", { value: "mg", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Malagasy"), /*#__PURE__*/ React.createElement("option", { value: "ms", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Malay"), /*#__PURE__*/ React.createElement("option", { value: "ml", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "Malayalam"), /*#__PURE__*/ React.createElement("option", { value: "mt", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Maltese"), /*#__PURE__*/ React.createElement("option", { value: "mi", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Maori"), /*#__PURE__*/ React.createElement("option", { value: "mr", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "Marathi"), /*#__PURE__*/ React.createElement("option", { value: "mn", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "Mongolian"), /*#__PURE__*/ React.createElement("option", { value: "my", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Myanmar (Burmese)"), /*#__PURE__*/ React.createElement("option", { value: "ne", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "Nepali"), /*#__PURE__*/ React.createElement("option", { value: "no", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Norwegian"), /*#__PURE__*/ React.createElement("option", { value: "or", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Odia (Oriya)"), /*#__PURE__*/ React.createElement("option", { value: "ps", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Pashto"), /*#__PURE__*/ React.createElement("option", { value: "fa", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Persian"), /*#__PURE__*/ React.createElement("option", { value: "pl", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Polish"), /*#__PURE__*/ React.createElement("option", { value: "pt", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "Portuguese"), /*#__PURE__*/ React.createElement("option", { value: "pa", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Punjabi"), /*#__PURE__*/ React.createElement("option", { value: "ro", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Romanian"), /*#__PURE__*/ React.createElement("option", { value: "ru", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "Russian"), /*#__PURE__*/ React.createElement("option", { value: "sm", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "Samoan"), /*#__PURE__*/ React.createElement("option", { value: "gd", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, "Scots Gaelic"), /*#__PURE__*/ React.createElement("option", { value: "sr", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Serbian"), /*#__PURE__*/ React.createElement("option", { value: "st", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "Sesotho"), /*#__PURE__*/ React.createElement("option", { value: "sn", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "Shona"), /*#__PURE__*/ React.createElement("option", { value: "sd", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Sindhi"), /*#__PURE__*/ React.createElement("option", { value: "si", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Sinhala"), /*#__PURE__*/ React.createElement("option", { value: "sk", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "Slovak"), /*#__PURE__*/ React.createElement("option", { value: "sl", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Slovenian"), /*#__PURE__*/ React.createElement("option", { value: "so", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "Somali"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "su", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "Sundanese"), /*#__PURE__*/ React.createElement("option", { value: "sw", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "Swahili"), /*#__PURE__*/ React.createElement("option", { value: "sv", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Swedish"), /*#__PURE__*/ React.createElement("option", { value: "tg", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "Tajik"), /*#__PURE__*/ React.createElement("option", { value: "ta", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, "Tamil"), /*#__PURE__*/ React.createElement("option", { value: "tt", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "Tatar"), /*#__PURE__*/ React.createElement("option", { value: "te", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Telugu"), /*#__PURE__*/ React.createElement("option", { value: "th", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Thai"), /*#__PURE__*/ React.createElement("option", { value: "tr", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "Turkish"), /*#__PURE__*/ React.createElement("option", { value: "tk", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Turkmen"), /*#__PURE__*/ React.createElement("option", { value: "uk", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, "Ukrainian"), /*#__PURE__*/ React.createElement("option", { value: "ur", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, "Urdu"), /*#__PURE__*/ React.createElement("option", { value: "ug", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Uyghur"), /*#__PURE__*/ React.createElement("option", { value: "uz", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "Uzbek"), /*#__PURE__*/ React.createElement("option", { value: "vi", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, "Vietnamese"), /*#__PURE__*/ React.createElement("option", { value: "cy", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, "Welsh"), /*#__PURE__*/ React.createElement("option", { value: "xh", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, "Xhosa"), /*#__PURE__*/ React.createElement("option", { value: "yi", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Yiddish"), /*#__PURE__*/ React.createElement("option", { value: "yo", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "Yoruba"), /*#__PURE__*/ React.createElement("option", { value: "zu", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "Zulu")), /*#__PURE__*/ React.createElement("textarea", { name: "textToTranslate", value: textToTranslate, onChange: handleTextChange, placeholder: "Enter text here...", className: "w-2/3 h-40 p-4 text-lg rounded-lg bg-[#444] placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleTranslateClick, className: `w-full py-3 text-lg font-bold rounded-lg shadow-md focus:outline-none ${loading ? 'bg-gray-600 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`, disabled: loading, style: animationStyle, __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, loading ? 'Translating...' : 'Translate'), translatedText && /*#__PURE__*/ React.createElement("div", { className: "py-4", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-lg bg-[#444] shadow-md", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, translatedText)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } `)); }