function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, video: "video1.mp4", description: "First video description", likes: 100, comments: 50 }, { id: 2, video: "video2.mp4", description: "Second video description", likes: 200, comments: 20 }, { id: 3, video: "video3.mp4", description: "Third video description", likes: 300, comments: 70 } ]); const addLike = (id)=>{ setPosts(posts.map((post)=>post.id === id ? { ...post, likes: post.likes + 1 } : post)); }; const addComment = (id)=>{ setPosts(posts.map((post)=>post.id === id ? { ...post, comments: post.comments + 1 } : post)); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000] min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#010101] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "TikTok Clone"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-4xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full flex flex-col items-center overflow-y-scroll", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "w-full max-w-[600px] my-4 bg-[#121212] rounded-lg p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[500px] bg-[#000000]", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "w-full h-full object-cover", src: post.video, alt: `Description of video ${post.id}`, controls: true, __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-white font-roboto mt-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, post.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-gray-400 mt-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { onClick: ()=>addLike(post.id), __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-red-500", __source: { fileName: "", lineNumber: 30, columnNumber: 54 }, __self: this }), " ", post.likes), /*#__PURE__*/ React.createElement("span", { onClick: ()=>addComment(post.id), __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment", __source: { fileName: "", lineNumber: 31, columnNumber: 57 }, __self: this }), " ", post.comments))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#010101] text-white p-4 text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "© 2023 TikTok Clone"))); }