function MainComponent() { const [selectedCourse, setSelectedCourse] = React.useState(''); const [subscriptionType, setSubscriptionType] = React.useState(''); const [completedModules, setCompletedModules] = React.useState(0); const [totalModules, setTotalModules] = React.useState(0); const [quizzesTaken, setQuizzesTaken] = React.useState(0); const [feedback, setFeedback] = React.useState(''); const handleCourseSelection = (event)=>{ setSelectedCourse(event.target.value); }; const handleSubscriptionSelection = (event)=>{ setSubscriptionType(event.target.value); }; const handleModuleCompletion = ()=>{ setCompletedModules((prevCompleted)=>prevCompleted + 1); // Simulate totalModules fetched from course data setTotalModules(10); }; const handleQuizSubmission = (score, userFeedback)=>{ setQuizzesTaken((prevQuizzes)=>prevQuizzes + 1); setFeedback(userFeedback); // Simulating automatic grading and feedback - actual implementation would involve backend logic }; const moduleCompletionPercentage = totalModules > 0 ? completedModules / totalModules * 100 : 0; const subscriptionOptions = [ 'Monthly', 'Yearly' ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#002244] text-white p-5", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-4xl mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "EduFlex Night School"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Customize your learning experience to achieve your career goals."), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "course", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Course Selection"), /*#__PURE__*/ React.createElement("select", { className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "course", name: "courseSelection", onChange: handleCourseSelection, value: selectedCourse, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Select a course"), /*#__PURE__*/ React.createElement("option", { value: "business", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Business"), /*#__PURE__*/ React.createElement("option", { value: "technology", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Technology"), /*#__PURE__*/ React.createElement("option", { value: "language", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Language"), /*#__PURE__*/ React.createElement("option", { value: "arts", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Arts"), /*#__PURE__*/ React.createElement("option", { value: "humanities", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Humanities"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Subscription Type"), subscriptionOptions.map((option)=>/*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", key: option, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", className: "form-radio", name: "subscriptionType", value: option.toLowerCase(), onChange: handleSubscriptionSelection, checked: subscriptionType === option.toLowerCase(), __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, option))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleModuleCompletion, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Complete Module")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Course Progress: ", `${completedModules}/${totalModules} Modules (${moduleCompletionPercentage.toFixed(2)}%)`)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleQuizSubmission(75, 'Great job on the quiz!'), className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Submit Quiz"), /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Quizzes Taken: ", quizzesTaken), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, feedback))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s; } `)); }