function TranslationForm({ japaneseText, englishText, onTranslate, onJapaneseTextChange }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: onTranslate, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-crimson-text", htmlFor: "japaneseText", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "日本語"), /*#__PURE__*/ React.createElement("textarea", { id: "japaneseText", name: "japaneseText", rows: "4", className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-crimson-text", value: japaneseText, onChange: onJapaneseTextChange, __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 mt-4 font-crimson-text", htmlFor: "englishText", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("textarea", { id: "englishText", name: "englishText", rows: "4", className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-crimson-text", value: englishText, readOnly: true, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-crimson-text mt-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "翻訳する")))); } function TranslationFormStory() { const [japaneseText, setJapaneseText] = React.useState(''); const [englishText, setEnglishText] = React.useState('Translation will appear here.'); const handleTranslate = (e)=>{ e.preventDefault(); // Add translation logic here setEnglishText('This is a translated text.'); }; const handleJapaneseTextChange = (e)=>{ setJapaneseText(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TranslationForm, { japaneseText: japaneseText, englishText: englishText, onTranslate: handleTranslate, onJapaneseTextChange: handleJapaneseTextChange, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); } function MainComponent() { const [japaneseText, setJapaneseText] = React.useState(''); const [englishText, setEnglishText] = React.useState('Translation will appear here.'); const handleTranslate = async (event)=>{ event.preventDefault(); try { const response = await fetch("https://api.mymemory.translated.net/get", { params: { q: japaneseText, langpair: "ja|en" } }); const data = await response.json(); setEnglishText(data.responseData.translatedText); } catch (error) { console.error("Error translating text:", error); } }; const handleJapaneseTextChange = (e)=>{ setJapaneseText(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f3f4f6] p-6", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-xl bg-white shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-center font-crimson-text", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "和英翻訳アプリ"), /*#__PURE__*/ React.createElement(TranslationForm, { japaneseText: japaneseText, englishText: englishText, onTranslate: handleTranslate, onJapaneseTextChange: handleJapaneseTextChange, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }))); }