function MainComponent() { const [posts, setPosts] = React.useState([ { id: 1, username: "fish_lover", imgUrl: "/images/fish1.jpg", caption: "Saw this beautiful fish today! #TropicalFish" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto pt-6", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "mb-8 bg-white border border-gray-300 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-4 border-b border-gray-300 items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-10 h-10 rounded-full mr-3", src: "/images/user-avatar.png", alt: `${post.username} profile`, __source: { fileName: "", lineNumber: 13, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#262626]", __source: { fileName: "", lineNumber: 14, columnNumber: 17 }, __self: this }, post.username)), /*#__PURE__*/ React.createElement("i", { className: "fa fa-ellipsis-h text-xl", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("img", { className: "w-full", src: post.imgUrl, alt: `Post by ${post.username} featuring their fish`, __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between py-2 px-4", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart-o text-xl mr-4", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-comment-o text-xl mr-4", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane-o text-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("i", { className: "fa fa-bookmark-o text-xl", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#262626] mr-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, post.username), /*#__PURE__*/ React.createElement("span", { className: "text-[#262626]", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, post.caption)), /*#__PURE__*/ React.createElement("form", { className: "flex items-center p-4 border-t border-gray-300", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 text-sm border-gray-300 rounded", type: "text", placeholder: "Add a comment...", name: "comment", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 text-sm font-semibold ml-2", type: "submit", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Post")))))); }