function MainComponent({ title, content, author, timestamp, imageUrl, upvotes, comments }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg border border-gray-200 shadow-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, imageUrl && /*#__PURE__*/ React.createElement("img", { className: "rounded-t-lg w-full h-[200px] object-cover", src: imageUrl, alt: `${title} image`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "mb-2 text-2xl font-semibold tracking-tight text-gray-900", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "mb-3 font-normal text-gray-700", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, author), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, timestamp)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, upvotes, " 👍"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, comments, " 💬")))); } function StoryComponent() { const posts = [ { title: "Exploring the Great Outdoors", content: "Let's discover some of the most breathtaking places to visit in nature...", author: "NatureLover", timestamp: "2 hours ago", imageUrl: "images/nature.jpg", upvotes: 120, comments: 45 }, { title: "The Future of Tech", content: "Technology is evolving at a breakneck pace. What are the latest innovations?", author: "TechGuru", timestamp: "1 day ago", imageUrl: "images/tech.jpg", upvotes: 300, comments: 60 }, { title: "Simple Recipes for Everyone", content: "Quick, easy, and delicious recipes that anyone can make at home.", author: "FoodieFan", timestamp: "3 days ago", imageUrl: "images/food.jpg", upvotes: 150, comments: 30 } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement(MainComponent, { ...post, key: post.title, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }))); }