function MainComponent() { const videos = [ { title: "Course 1", description: "An introduction to horse riding safety practices and techniques.", videoSrc: "/videos/course1.mp4" }, { title: "Course 2", description: "Learn about maintaining and caring for different riding equipment.", videoSrc: "/videos/course2.mp4" } ]; const [currentIndex, setCurrentIndex] = React.useState(0); const handleSwipeUp = ()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % videos.length); }; const handleSkip = ()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % videos.length); }; React.useEffect(()=>{ const handleTouchStart = (e)=>{ this.yDown = e.touches[0].clientY; }; const handleTouchMove = (e)=>{ if (!this.yDown) return; const yUp = e.touches[0].clientY; const yDiff = this.yDown - yUp; if (yDiff > 0) handleSwipeUp(); this.yDown = null; }; document.addEventListener("touchstart", handleTouchStart); document.addEventListener("touchmove", handleTouchMove); return ()=>{ document.removeEventListener("touchstart", handleTouchStart); document.removeEventListener("touchmove", handleTouchMove); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#ff6600] min-h-screen flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-white absolute top-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Hornbach AG Learning Platform"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center justify-center p-6 w-full", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md w-full md:w-[400px] h-[600px] flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "w-full h-full object-cover rounded-t-lg", controls: true, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videos[currentIndex].videoSrc, type: "video/mp4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold font-roboto text-[#ff6600] mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, videos[currentIndex].title), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, videos[currentIndex].description))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-[#ff6600] text-white font-roboto rounded", onClick: handleSkip, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Skip")), /*#__PURE__*/ React.createElement("p", { className: "text-white font-roboto absolute bottom-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "© 2023 Hornbach AG. All rights reserved.")); }