function MainComponent() { const [flashcards, setFlashcards] = React.useState([ { question: 'Capital of France', answer: 'Paris' }, { question: 'Largest planet in our solar system', answer: 'Jupiter' }, { question: 'Element with atomic number 1', answer: 'Hydrogen' } ]); const [currentCard, setCurrentCard] = React.useState(0); const handleNextCard = ()=>{ setCurrentCard((prevCard)=>(prevCard + 1) % flashcards.length); }; const handlePrevCard = ()=>{ setCurrentCard((prevCard)=>(prevCard - 1 + flashcards.length) % flashcards.length); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-screen items-center bg-gray-100", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-600 p-4 text-white font-roboto text-lg flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-book-open mr-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }), "StudyTool"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-2", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Flashcards"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Sign Up"))), /*#__PURE__*/ React.createElement("section", { className: "py-8 w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Your Flashcards"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] px-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md rounded-md w-full", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, flashcards[currentCard].question), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, flashcards[currentCard].answer)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevCard, className: "bg-blue-600 text-white py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("button", { onClick: handleNextCard, className: "bg-blue-600 text-white py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Next")))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-blue-600 p-4 text-white font-roboto flex justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "© 2023 StudyTool"))); }