function UserPostsDisplay({ posts, acceptedUser }) { const [collapsedPosts, setCollapsedPosts] = React.useState(posts.map((post)=>post.id)); const toggleCollapse = (postId)=>{ setCollapsedPosts((prev)=>prev.includes(postId) ? prev.filter((id)=>id !== postId) : [ ...prev, postId ]); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center bg-blue-500 p-4 text-white font-crimson-text", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Header")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, posts.map((post)=>{ const isCollapsed = collapsedPosts.includes(post.id); return /*#__PURE__*/ React.createElement("div", { key: post.id, className: "mb-4 border p-4 rounded-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.avatar, alt: `Avatar of ${post.userName}`, className: "w-12 h-12 rounded-full mr-4", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-xl", __source: { fileName: "", lineNumber: 25, columnNumber: 19 }, __self: this }, post.userName), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, "@", post.userId)), /*#__PURE__*/ React.createElement("button", { className: "ml-auto text-blue-500 font-crimson-text", onClick: ()=>toggleCollapse(post.id), __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, isCollapsed ? 'Expand' : 'Collapse')), !isCollapsed && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, post.datePosted), acceptedUser && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 37, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "response", rows: "3", className: "w-full p-2 border rounded-md", placeholder: "Write your response...", __source: { fileName: "", lineNumber: 38, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 23 }, __self: this }, "Respond")))); })), /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 right-0 bg-blue-500 p-4 flex justify-around text-white font-crimson-text", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Posts"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Profile"))); } function UserPostsDisplayStory() { const demoPosts = [ { id: 1, avatar: '/avatars/user1.jpg', userName: 'John Doe', userId: 'john123', content: 'This is the first post content', datePosted: '2023-10-12' }, { id: 2, avatar: '/avatars/user2.jpg', userName: 'Jane Smith', userId: 'jane_s', content: 'This is the second post content', datePosted: '2023-10-13' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserPostsDisplay, { posts: demoPosts, acceptedUser: true, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); } function MainComponent() { const [acceptedUser, setAcceptedUser] = React.useState(true); const [posts, setPosts] = React.useState([ { id: 1, avatar: '/avatars/user1.jpg', userName: 'John Doe', userId: 'john123', content: 'This is the first post content', datePosted: '2023-10-12' }, { id: 2, avatar: '/avatars/user2.jpg', userName: 'Jane Smith', userId: 'jane_s', content: 'This is the second post content', datePosted: '2023-10-13' } ]); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center bg-blue-500 p-4 text-white font-crimson-text", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Header")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(UserPostsDisplay, { posts: posts, acceptedUser: acceptedUser, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 right-0 bg-blue-500 p-4 flex justify-around text-white font-crimson-text", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Posts"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Profile"))); }