function MainComponent() { const [currentPostIndex, setCurrentPostIndex] = React.useState(0); const [posts, setPosts] = React.useState([ { id: 1, username: 'user1', videoUrl: '/videos/post1.mp4', timestamp: '2h ago', likes: 120, comments: 15, answers: [ { id: 101, username: 'user2', videoUrl: '/videos/answer1.mp4', timestamp: '1h ago' }, { id: 102, username: 'user3', videoUrl: '/videos/answer2.mp4', timestamp: '30m ago' } ] }, { id: 2, username: 'user4', videoUrl: '/videos/post2.mp4', timestamp: '4h ago', likes: 85, comments: 7, answers: [ { id: 201, username: 'user5', videoUrl: '/videos/answer3.mp4', timestamp: '3h ago' } ] } ]); const handleSwipe = (direction)=>{ if (direction === 'up' && currentPostIndex < posts.length - 1) { setCurrentPostIndex(currentPostIndex + 1); } else if (direction === 'down' && currentPostIndex > 0) { setCurrentPostIndex(currentPostIndex - 1); } }; const currentPost = posts[currentPostIndex]; return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md h-[90vh] relative overflow-hidden", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("video", { src: currentPost.videoUrl, className: "w-full h-full object-cover", loop: true, autoPlay: true, muted: true, playsInline: true, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-2xl text-white mr-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-white font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, currentPost.username), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300 text-sm ml-auto font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, currentPost.timestamp)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-3xl", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm mt-1 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, currentPost.likes)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment text-3xl", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm mt-1 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, currentPost.comments)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share text-3xl", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm mt-1 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Share"))))), /*#__PURE__*/ React.createElement("div", { className: "absolute right-4 top-1/2 transform -translate-y-1/2", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, currentPost.answers.map((answer)=>/*#__PURE__*/ React.createElement("div", { key: answer.id, className: "w-12 h-12 rounded-full bg-gray-300 overflow-hidden", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { src: answer.videoUrl, className: "w-full h-full object-cover", loop: true, autoPlay: true, muted: true, playsInline: true, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 left-4 text-white text-2xl", onClick: ()=>handleSwipe('down'), __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-up", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "absolute bottom-4 left-4 text-white text-2xl", onClick: ()=>handleSwipe('up'), __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }))); }