function MainComponent() { const [apiKey, setApiKey] = React.useState(''); const [language, setLanguage] = React.useState('en'); const [text, setText] = React.useState(''); const [translatedText, setTranslatedText] = React.useState(''); const [showModal, setShowModal] = React.useState(true); const handleTranslate = async ()=>{ const response = await fetch('https://translation.googleapis.com/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: text, target: language, key: apiKey }), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); const data = await response.json(); setTranslatedText(data.data.translations[0].translatedText); }; const copyToClipboard = ()=>{ navigator.clipboard.writeText(translatedText); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded w-[80%] max-w-md", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "apiKey", type: "text", value: apiKey, onChange: (e)=>setApiKey(e.target.value), placeholder: "API Key", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(false), className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Save")))), /*#__PURE__*/ React.createElement("div", { className: "w-[80%] mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "language", value: language, onChange: (e)=>setLanguage(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "ja", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Japanese"))), /*#__PURE__*/ React.createElement("div", { className: "w-[80%] mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "text-to-translate", value: text, onChange: (e)=>setText(e.target.value), className: "w-full p-2 border border-gray-300 rounded h-40", placeholder: "Text to translate", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[80%] flex justify-between items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, type: "button", className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Translate"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy cursor-pointer", onClick: copyToClipboard, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[80%] mt-4 p-2 border border-gray-300 rounded overflow-auto h-40", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, translatedText)); }