function MainComponent() { const [input, setInput] = React.useState(""); const [translatedText, setTranslatedText] = React.useState(""); const [isJapanese, setIsJapanese] = React.useState(true); const translateText = async ()=>{ const sourceLang = isJapanese ? 'ja' : 'en'; const targetLang = isJapanese ? 'en' : 'ja'; const response = await fetch(`https://api.mymemory.translated.net/get?q=${input}&langpair=${sourceLang}|${targetLang}`); const data = await response.json(); setTranslatedText(data.responseData.translatedText); }; const handleChange = (e)=>{ setInput(e.target.value); }; const handleTranslate = ()=>{ translateText(); }; const toggleLanguage = ()=>{ setIsJapanese(!isJapanese); setInput(""); setTranslatedText(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "かっこいい和英翻訳アプリ"), /*#__PURE__*/ React.createElement("button", { onClick: toggleLanguage, className: "mb-4 p-2 bg-[#ff5733] text-white rounded font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, isJapanese ? '日本語から英語に切り替える' : '英語から日本語に切り替える'), /*#__PURE__*/ React.createElement("textarea", { name: "inputText", value: input, onChange: handleChange, placeholder: isJapanese ? '日本語を入力してください...' : 'Enter English text...', className: "w-full p-2 border-[#cccccc] border mb-4", rows: "4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, className: "w-full p-2 bg-[#3399ff] text-white rounded font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Translate"), translatedText && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-white p-4 border border-[#cccccc] rounded w-full", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Translated Text"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, translatedText))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this })); }