function MainComponent() { const [currentSlide, setCurrentSlide] = React.useState(0); const slides = [ { title: "How to use AI for company", content: [ "Context", "Design", "Output", "Execute" ] }, { title: "Context", content: [ "Scenario:", "How to use AI for company", "- ", "- ", "- ", "- ", "- ", "- ", "- " ] }, { title: "Design", content: [ "Figma Design", "- " ] }, { title: "Output", content: [ "Each SVG slide" ] }, { title: "Execute", content: [ "Command 1 to End", "–C1", "–C2", "–C3", "…", "–C end" ] } ]; const nextSlide = ()=>{ setCurrentSlide((prev)=>(prev + 1) % slides.length); }; const prevSlide = ()=>{ setCurrentSlide((prev)=>(prev - 1 + slides.length) % slides.length); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 w-[800px] h-[600px] relative", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, slides[currentSlide].title), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, slides[currentSlide].content.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, item))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 right-4 flex space-x-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevSlide, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left mr-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), "Previous"), /*#__PURE__*/ React.createElement("button", { onClick: nextSlide, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Next", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right ml-2", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 font-roboto text-gray-600", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Slide ", currentSlide + 1, " of ", slides.length))); }