function MainComponent() { const [translatedText, setTranslatedText] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const handleTranslate = async (e)=>{ const inputText = document.getElementById('inputText').value; const targetLanguage = document.getElementById('targetLanguage').value; const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: inputText, target: targetLanguage }) }); const data = await response.json(); const translation = data.data.translations[0].translatedText; await fetch('/api/db/ferrigan', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `translations` (input_text, translated_text, target_language) VALUES (?, ?, ?)", values: [ inputText, translation, targetLanguage ] }) }); setTranslatedText(translation); }; const handleSearch = async (e)=>{ const searchQuery = document.getElementById('searchQuery').value; const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery)}`, { method: 'GET' }); const data = await response.json(); setSearchResults(data.items); await fetch('/api/db/ferrigan', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `searches` (query) VALUES (?)", values: [ searchQuery ] }) }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mx-auto p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "inputText", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Text to Translate"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "inputText", name: "inputText", type: "text", placeholder: "Enter text", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "targetLanguage", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Target Language"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "targetLanguage", name: "targetLanguage", type: "text", placeholder: "Enter target language code", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleTranslate, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Translate"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Translated Text"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", id: "translatedText", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, translatedText)), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "searchQuery", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Google Search"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "searchQuery", name: "searchQuery", type: "text", placeholder: "Enter search query", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleSearch, __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "Search Results"), /*#__PURE__*/ React.createElement("ul", { className: "text-gray-700 text-base", id: "searchResults", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, item.title)))))); }