function MainComponent() { const subjects = [ "English", "Mathematics", "Government", "Physics" ]; const [activeTab, setActiveTab] = React.useState(0); const [currentQuestion, setCurrentQuestion] = React.useState(0); const [pageIndex, setPageIndex] = React.useState(0); const questions = Array.from({ length: 40 }, (_, i)=>`Question ${i + 1}`); const userImage = "path/to/user-image.jpg"; const totalPages = Math.ceil(questions.length / 10); React.useEffect(()=>{ const timer = setInterval(()=>{ // Timer logic can be implemented based on requirements }, 1000); return ()=>clearInterval(timer); }, []); const handlePagination = (direction)=>{ setPageIndex((prev)=>direction === "next" ? Math.min(prev + 1, totalPages - 1) : Math.max(prev - 1, 0)); }; const handleQuestionChange = (direction)=>{ setCurrentQuestion((prev)=>direction === "next" ? Math.min(prev + 1, questions.length - 1) : Math.max(prev - 1, 0)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full bg-[#fafafa] font-crimson-text", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-gray-800 text-white p-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Subject Tabs")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center bg-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "User Name"), /*#__PURE__*/ React.createElement("img", { src: userImage, alt: "User profile picture", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-4 justify-center", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, subjects.map((subject, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>{ setActiveTab(index); setCurrentQuestion(0); setPageIndex(0); }, className: `px-4 py-2 rounded ${activeTab === index ? "bg-gray-300" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, subject))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleQuestionChange("prev"), className: "px-4 py-2 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleQuestionChange("next"), className: "px-4 py-2 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Next")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, questions[pageIndex * 10 + currentQuestion])), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePagination("prev"), className: "px-4 py-2 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Previous Page"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePagination("next"), className: "px-4 py-2 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Next Page")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-200 p-4 rounded-lg flex justify-between items-center", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Time Remaining: 10:00"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 text-white p-2 flex justify-around items-center fixed bottom-0 w-full", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-home text-xl", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "fa fa-cogs text-xl", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "fa fa-newspaper text-xl", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "fa fa-info-circle text-xl", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 100, columnNumber: 1 }, __self: this }, ` .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `);