function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, user: "User1", avatar: "avatar1.png", content: "This is a sample status update!", reviews: [], likes: 0, comments: [], showComments: false }, { id: 2, user: "User2", avatar: "avatar2.png", content: "Here is another status update!", reviews: [], likes: 0, comments: [], showComments: false } ]); const [status, setStatus] = React.useState(""); const [review, setReview] = React.useState(""); const [comment, setComment] = React.useState(""); const [groups, setGroups] = React.useState([ { id: 1, name: "Group 1" }, { id: 2, name: "Group 2" } ]); const [movies, setMovies] = React.useState([ { id: 1, title: "Movie 1", url: "movie1.mp4" }, { id: 2, title: "Movie 2", url: "movie2.mp4" } ]); const [friends, setFriends] = React.useState([ { id: 1, name: "Friend 1", avatar: "friend1.png" }, { id: 2, name: "Friend 2", avatar: "friend2.png" } ]); const handlePost = ()=>{ if (status.trim()) { setPosts([ { id: posts.length + 1, user: "CurrentUser", avatar: "avatar_current.png", content: status, reviews: [], likes: 0, comments: [], showComments: false }, ...posts ]); setStatus(""); } }; const handleReview = (postId)=>{ if (review.trim()) { setPosts((prevPosts)=>prevPosts.map((post)=>post.id === postId ? { ...post, reviews: [ ...post.reviews, { id: post.reviews.length + 1, user: "CurrentUser", content: review } ] } : post)); setReview(""); } }; const handleLike = (postId)=>{ setPosts((prevPosts)=>prevPosts.map((post)=>post.id === postId ? { ...post, likes: post.likes + 1 } : post)); }; const handleComment = (postId)=>{ if (comment.trim()) { setPosts((prevPosts)=>prevPosts.map((post)=>post.id === postId ? { ...post, comments: [ ...post.comments, { id: post.comments.length + 1, user: "CurrentUser", content: comment } ] } : post)); setComment(""); } }; const toggleComments = (postId)=>{ setPosts((prevPosts)=>prevPosts.map((post)=>post.id === postId ? { ...post, showComments: !post.showComments } : post)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-yellow-400 to-purple-500 p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center bg-white p-4 shadow-md", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold font-roboto text-purple-800", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Watchmate"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-xl text-pink-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 47, columnNumber: 57 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-xl text-pink-500", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 48, columnNumber: 57 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-xl text-pink-500", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 49, columnNumber: 57 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-xl text-pink-500", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users", __source: { fileName: "", lineNumber: 50, columnNumber: 57 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 mx-auto w-full md:w-2/3 lg:w-1/2", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "status", className: "w-full p-2 border border-gray-300 rounded-md", rows: "3", placeholder: "What's on your mind?", value: status, onChange: (e)=>setStatus(e.target.value), __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 w-full bg-pink-500 hover:bg-pink-700 text-white py-2 rounded-md font-roboto", onClick: handlePost, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Post")), posts.map((post)=>{ const postReviews = post.reviews.map((review)=>/*#__PURE__*/ React.createElement("p", { key: review.id, className: "text-sm text-gray-800 font-roboto mt-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, review.user, ": ", review.content)); const postComments = post.comments.map((comment)=>/*#__PURE__*/ React.createElement("p", { key: comment.id, className: "text-sm text-gray-800 font-roboto mt-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, comment.user, ": ", comment.content)); return /*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white p-4 rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.avatar, alt: `Avatar of ${post.user}`, className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, post.user)), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex space-x-6", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-1 text-blue-500", onClick: ()=>handleLike(post.id), __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-thumbs-up", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 85, columnNumber: 55 }, __self: this }, "Like (", post.likes, ")")), /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-1 text-blue-500", onClick: ()=>toggleComments(post.id), __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment", __source: { fileName: "", lineNumber: 87, columnNumber: 119 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 87, columnNumber: 153 }, __self: this }, "Comment")), /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-1 text-blue-500", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share", __source: { fileName: "", lineNumber: 88, columnNumber: 79 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 88, columnNumber: 111 }, __self: this }, "Share"))), post.showComments && /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-gray-100 p-4 rounded-md", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold font-roboto text-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Comments"), postComments, /*#__PURE__*/ React.createElement("textarea", { name: "comment", className: "w-full p-2 border border-gray-300 rounded-md mt-2", rows: "2", placeholder: "Write a comment", value: comment, onChange: (e)=>setComment(e.target.value), __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 w-full bg-pink-500 hover:bg-pink-700 text-white py-2 rounded-md font-roboto", onClick: ()=>handleComment(post.id), __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "Submit Comment")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-gray-100 p-4 rounded-md", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold font-roboto text-lg", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "Reviews"), postReviews, /*#__PURE__*/ React.createElement("textarea", { name: "review", className: "w-full p-2 border border-gray-300 rounded-md mt-2", rows: "2", placeholder: "Write a review", value: review, onChange: (e)=>setReview(e.target.value), __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 w-full bg-pink-500 hover:bg-pink-700 text-white py-2 rounded-md font-roboto", onClick: ()=>handleReview(post.id), __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, "Submit Review"))); }), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md mt-6", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Groups and Communities"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, groups.map((group)=>/*#__PURE__*/ React.createElement("li", { key: group.id, className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, group.name), /*#__PURE__*/ React.createElement("button", { className: "bg-pink-500 hover:bg-pink-700 text-white px-3 py-1 rounded-md font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "Join"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md mt-6", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "Watch Movies"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, movies.map((movie)=>/*#__PURE__*/ React.createElement("li", { key: movie.id, __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, movie.title), /*#__PURE__*/ React.createElement("video", { className: "w-full", controls: true, __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: movie.url, type: "video/mp4", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md mt-6", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "Find Friends"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, friends.map((friend)=>/*#__PURE__*/ React.createElement("li", { key: friend.id, className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: friend.avatar, alt: `Avatar of ${friend.name}`, className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 154, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, friend.name)), /*#__PURE__*/ React.createElement("button", { className: "bg-pink-500 hover:bg-pink-700 text-white px-3 py-1 rounded-md font-roboto", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "Add Friend"))))))); }