function MainComponent() { const [currentIndex, setCurrentIndex] = React.useState(0); const [videos, setVideos] = React.useState([]); const [showRegister, setShowRegister] = React.useState(false); React.useEffect(()=>{ const fetchVideos = async ()=>{ const response = await fetch('https://external-site-api/videos'); const data = await response.json(); setVideos(data); }; fetchVideos(); }, []); const handleSwipe = (direction)=>{ switch(direction){ case 'right': if (videos[currentIndex] && videos[currentIndex].purchaseUrl) { window.location.href = videos[currentIndex].purchaseUrl; } break; case 'left': break; case 'up': setCurrentIndex((prevIndex)=>(prevIndex + 1) % videos.length); break; default: break; } }; const handleTouchEnd = (e)=>{ const touchStart = e.changedTouches[0]; const touchEnd = e.changedTouches[e.changedTouches.length - 1]; const diffX = touchStart.screenX - touchEnd.screenX; const diffY = touchStart.screenY - touchEnd.screenY; if (Math.abs(diffX) > Math.abs(diffY)) { if (diffX > 0) { handleSwipe('left'); } else { handleSwipe('right'); } } else { if (diffY > 0) { handleSwipe('up'); } } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f5]", onTouchEnd: handleTouchEnd, __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#ff007a] font-roboto text-4xl mb-8", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "YourAV"), showRegister ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-4 border-2 border-[#ff007a]", type: "text", placeholder: "Username", name: "username", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-4 border-2 border-[#ff007a]", type: "password", placeholder: "Password", name: "password", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff007a] text-white p-4", type: "submit", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Register")), /*#__PURE__*/ React.createElement("button", { className: "mt-4 text-[#ff007a]", onClick: ()=>setShowRegister(false), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Cancel")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff007a] text-white py-2 px-4 mb-8", onClick: ()=>setShowRegister(true), __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full overflow-y-scroll", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, videos.length > 0 && /*#__PURE__*/ React.createElement("iframe", { className: "w-full md:w-[640px] h-[360px] mb-6", src: videos[currentIndex].url, title: "External Video Content", allowFullScreen: true, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })))); }