function MainComponent() { const slides = [ { title: "The Equation of a Line", content: "Any straight line in a two-dimensional space can be represented by an equation. This equation is often written in the form y = mx + b." }, { title: "Slope (m)", content: "In the equation y = mx + b, m represents the slope of the line. The slope indicates the steepness of the line and the direction in which the line tilts." }, { title: "Y-intercept (b)", content: "In the equation y = mx + b, b represents the y-intercept. The y-intercept is the point where the line crosses the y-axis." }, { title: "Graphing a Line", content: "To graph a line, you need to know the slope and y-intercept. With these, you can draw the line on a coordinate plane by starting at the y-intercept and following the slope." } ]; const [currentSlide, setCurrentSlide] = React.useState(0); const nextSlide = ()=>{ setCurrentSlide((prevSlide)=>(prevSlide + 1) % slides.length); }; const prevSlide = ()=>{ setCurrentSlide((prevSlide)=>(prevSlide - 1 + slides.length) % slides.length); }; const slide = slides[currentSlide]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-xl rounded-lg w-full max-w-[800px] p-8", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl text-[#000000] mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, slide.title), /*#__PURE__*/ React.createElement("p", { className: "font-normal text-base text-[#555555] mb-8", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, slide.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevSlide, className: "text-white bg-[#007bff] hover:bg-[#0056b3] font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-chevron-left", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: nextSlide, className: "text-white bg-[#007bff] hover:bg-[#0056b3] font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-chevron-right", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, ` body { overflow: hidden; } `)); }