function MainComponent({ currentScreen, progress, dailyGoal, onAddWord, onStartQuiz, onOpenSettings, onInputWord, wordInput, wordMeaning, wordExample, onAddMeaning, wordList, quizQuestion, quizOptions, onSelectAnswer, quizFeedback, onNextQuestion, userGoal, onUpdateGoal, onResetProgress, onGeneratePDF, translatedWord }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, currentScreen === 'home' && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "English Vocabulary App"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-1", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Progress: ", progress, "%")), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Today's goal: Learn ", dailyGoal, " words"), /*#__PURE__*/ React.createElement("button", { onClick: onAddWord, className: "bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mr-2", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Add Word"), /*#__PURE__*/ React.createElement("button", { onClick: onStartQuiz, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mr-2", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Start Quiz"), /*#__PURE__*/ React.createElement("button", { onClick: onOpenSettings, className: "bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Settings")), currentScreen === 'addWord' && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Add New Word"), /*#__PURE__*/ React.createElement("input", { type: "text", value: wordInput, onChange: onInputWord, className: "w-full p-2 border border-gray-300 rounded mb-4", placeholder: "Enter an English word", name: "wordInput", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), translatedWord && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Translation:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, translatedWord)), wordMeaning && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Meaning:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, wordMeaning)), wordExample && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Example:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, wordExample)), /*#__PURE__*/ React.createElement("button", { onClick: onAddMeaning, className: "bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Add Meaning")), currentScreen === 'wordList' && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Word List"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, wordList.map((word, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4 p-2 border-b", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, word.word), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Meaning: ", word.meaning), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "Example: ", word.example), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Progress:", word.progress === 'unlearned' && /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 72, columnNumber: 53 }, __self: this }, "Unlearned"), word.progress === 'learning' && /*#__PURE__*/ React.createElement("span", { className: "text-yellow-500", __source: { fileName: "", lineNumber: 73, columnNumber: 52 }, __self: this }, "Learning"), word.progress === 'mastered' && /*#__PURE__*/ React.createElement("span", { className: "text-green-500", __source: { fileName: "", lineNumber: 74, columnNumber: 52 }, __self: this }, "Mastered")))))), currentScreen === 'quiz' && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Quiz"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, quizQuestion), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, quizOptions.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>onSelectAnswer(option), className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, option))), quizFeedback && /*#__PURE__*/ React.createElement("p", { className: `mt-4 font-bold ${quizFeedback.includes('Correct') ? 'text-green-500' : 'text-red-500'}`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, quizFeedback), /*#__PURE__*/ React.createElement("button", { onClick: onNextQuestion, className: "mt-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Next Question")), currentScreen === 'settings' && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Daily Goal (words):"), /*#__PURE__*/ React.createElement("input", { type: "number", value: userGoal, onChange: onUpdateGoal, className: "w-full p-2 border border-gray-300 rounded", name: "userGoal", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onResetProgress, className: "bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded mr-2", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Reset Progress"), /*#__PURE__*/ React.createElement("button", { onClick: onGeneratePDF, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Download PDF"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { currentScreen: "home", progress: 35, dailyGoal: 10, onAddWord: ()=>console.log("Add word clicked"), onStartQuiz: ()=>console.log("Start quiz clicked"), onOpenSettings: ()=>console.log("Open settings clicked"), onInputWord: ()=>console.log("Word input changed"), wordInput: "", wordMeaning: "", wordExample: "", onAddMeaning: ()=>console.log("Add meaning clicked"), wordList: [ { word: "Example", meaning: "A thing characteristic of its kind", example: "This is an example sentence.", progress: "learning" }, { word: "Vocabulary", meaning: "The body of words used in a particular language", example: "He has an extensive English vocabulary.", progress: "mastered" } ], quizQuestion: "What is the meaning of 'Example'?", quizOptions: [ "A model", "A test", "A book", "A pen" ], onSelectAnswer: ()=>console.log("Answer selected"), quizFeedback: "Correct! Well done.", onNextQuestion: ()=>console.log("Next question clicked"), userGoal: 10, onUpdateGoal: ()=>console.log("Goal updated"), onResetProgress: ()=>console.log("Progress reset"), onGeneratePDF: ()=>console.log("PDF generated"), translatedWord: "例 (rei)", __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this })); }