function MainComponent() { const [sourceText, setSourceText] = useState(""); const [translatedText, setTranslatedText] = useState(""); const [sourceLang, setSourceLang] = useState("auto"); const [targetLang, setTargetLang] = useState("fr"); const [isTranslating, setIsTranslating] = useState(false); const [history, setHistory] = useState([]); const [recentLanguages, setRecentLanguages] = useState([ "fr", "en", "es" ]); const languages = [ { code: "auto", name: "Détecter la langue" }, { code: "fr", name: "Français" }, { code: "en", name: "English" }, { code: "es", name: "Español" }, { code: "de", name: "Deutsch" }, { code: "it", name: "Italiano" }, { code: "pt", name: "Português" }, { code: "nl", name: "Nederlands" }, { code: "pl", name: "Polski" }, { code: "ru", name: "Русский" }, { code: "ja", name: "日本語" }, { code: "zh", name: "中文" }, { code: "ko", name: "한국어" } ]; const handleTranslate = async ()=>{ if (!sourceText.trim()) return; setIsTranslating(true); try { const response = await fetch("/api/translate", { method: "POST", body: JSON.stringify({ text: sourceText, targetLanguage: targetLang }) }); const data = await response.json(); setTranslatedText(data.translatedText); setHistory((prev)=>[ { sourceText, translatedText: data.translatedText, fromLang: sourceLang, toLang: targetLang, timestamp: new Date() }, ...prev.slice(0, 9) ]); updateRecentLanguages(targetLang); } catch (error) { console.error("Translation error:", error); } finally{ setIsTranslating(false); } }; const updateRecentLanguages = (lang)=>{ setRecentLanguages((prev)=>{ const filtered = prev.filter((l)=>l !== lang); return [ lang, ...filtered ].slice(0, 3); }); }; const copyToClipboard = (text)=>{ navigator.clipboard.writeText(text); }; const switchLanguages = ()=>{ const temp = sourceLang; setSourceLang(targetLang); setTargetLang(temp); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#0078D4] text-white py-3 px-4 shadow-md", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto flex items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-segoe-ui tracking-tight", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Microsoft Translator"))), /*#__PURE__*/ React.createElement("main", { className: "max-w-4xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-6", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 px-1", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: sourceLang, onChange: (e)=>setSourceLang(e.target.value), className: "flex-1 py-2.5 text-base font-segoe-ui border-b border-transparent hover:border-[#0078D4] focus:border-[#0078D4] focus:outline-none cursor-pointer appearance-none bg-transparent", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, languages.map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang.code, value: lang.code, __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, lang.name))), /*#__PURE__*/ React.createElement("button", { onClick: switchLanguages, className: "p-2 hover:bg-gray-100 rounded-full transition-colors", "aria-label": "Échanger les langues", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exchange-alt text-[#0078D4]", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: targetLang, onChange: (e)=>setTargetLang(e.target.value), className: "flex-1 py-2.5 text-base font-segoe-ui border-b border-transparent hover:border-[#0078D4] focus:border-[#0078D4] focus:outline-none cursor-pointer appearance-none bg-transparent", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, languages.filter((lang)=>lang.code !== "auto").map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang.code, value: lang.code, __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, lang.name)))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: sourceText, onChange: (e)=>setSourceText(e.target.value), placeholder: "Entrez le texte à traduire", className: "w-full h-[200px] p-4 text-base font-segoe-ui border rounded resize-none focus:outline-none focus:border-[#0078D4] focus:ring-1 focus:ring-[#0078D4]", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(sourceText), className: "absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded", title: "Copier", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: translatedText, readOnly: true, placeholder: "Traduction", className: "w-full h-[200px] p-4 text-base font-segoe-ui border rounded resize-none bg-gray-50", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(translatedText), className: "absolute top-2 right-2 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded", title: "Copier", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this })), isTranslating && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gray-50 bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-6 w-6 border-2 border-[#0078D4] border-t-transparent", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-2", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, disabled: isTranslating || !sourceText.trim(), className: "bg-[#0078D4] text-white px-8 py-2 text-base font-segoe-ui rounded hover:bg-[#006cbe] disabled:opacity-50 disabled:cursor-not-allowed transition-colors", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, isTranslating ? "Traduction..." : "Traduire")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 border-t pt-4", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-segoe-ui text-gray-600 mb-3 px-1", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, "Langues récentes"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 overflow-x-auto pb-2 px-1", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, recentLanguages.map((code)=>/*#__PURE__*/ React.createElement("button", { key: code, onClick: ()=>setTargetLang(code), className: `flex-none px-4 py-1.5 text-sm font-segoe-ui rounded ${targetLang === code ? "bg-[#0078D4] text-white" : "border border-gray-200 hover:border-[#0078D4] hover:text-[#0078D4]"}`, __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, languages.find((l)=>l.code === code)?.name))))))); }