function MathLearningCard({ lesson, onClick }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-md rounded-lg flex flex-col items-center cursor-pointer", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-book text-[#3b5998] text-3xl mb-3", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, lesson)); } function MathLearningCardStory() { const handleLessonClick = (lesson)=>{ console.log(`Lesson clicked: ${lesson}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MathLearningCard, { lesson: "Algebra Basics", onClick: ()=>handleLessonClick('Algebra Basics'), __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MathLearningCard, { lesson: "Geometry Fundamentals", onClick: ()=>handleLessonClick('Geometry Fundamentals'), __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MathLearningCard, { lesson: "Calculus Introduction", onClick: ()=>handleLessonClick('Calculus Introduction'), __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const lessons = [ "Algebra", "Geometry", "Calculus", "Statistics" ]; const handleLessonClick = (lesson)=>{ alert(`Starting lesson: ${lesson}`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full min-h-screen bg-[#f0f4f8] font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#3b5998] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "MathLearner"), /*#__PURE__*/ React.createElement("nav", { className: "flex gap-4", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-6 w-full max-w-[1200px] mx-auto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Choose a Lesson"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, lessons.map((lesson, index)=>/*#__PURE__*/ React.createElement(MathLearningCard, { key: index, lesson: lesson, onClick: ()=>handleLessonClick(lesson), __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#3b5998] text-white p-4 flex justify-center items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "© 2023 MathLearner"))); }