function MainComponent() { const [screen, setScreen] = React.useState('dashboard'); const renderScreen = ()=>{ if (screen === 'dashboard') { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Course Theory"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 bg-white", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Course Title"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac fringilla felis, non iaculis lacus."), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white px-4 py-2", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "Start Course"))); } else if (screen === 'courses') { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "My Courses"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 bg-white", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Course Title"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Details about this course. Curabitur et ligula. Ut molestie a, ultricies porta urna."), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white px-4 py-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Go to Course"))); } else if (screen === 'assessments') { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Assessments"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 bg-white", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Assessment Title"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Assessment description here. Vivamus feugiat malesuada lorem nec bibendum."), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white px-4 py-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Start Assessment"))); } else if (screen === 'progress') { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Progress Tracking"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 bg-white", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Your Progress"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Track your course progress and assessment scores."), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 h-1 mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-1", style: { width: '70%' }, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "70% Completed"))); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4 text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Course Library")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "w-full sm:w-1/4 bg-gray-200 p-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { onClick: ()=>setScreen('dashboard'), className: "py-2 px-4 hover:bg-gray-300 cursor-pointer", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("li", { onClick: ()=>setScreen('courses'), className: "py-2 px-4 hover:bg-gray-300 cursor-pointer", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "My Courses"), /*#__PURE__*/ React.createElement("li", { onClick: ()=>setScreen('assessments'), className: "py-2 px-4 hover:bg-gray-300 cursor-pointer", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Assessments"), /*#__PURE__*/ React.createElement("li", { onClick: ()=>setScreen('progress'), className: "py-2 px-4 hover:bg-gray-300 cursor-pointer", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Progress"))), /*#__PURE__*/ React.createElement("main", { className: "w-full sm:w-3/4 p-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, renderScreen()))); }