function MainComponent({ imageUrl, profileImageUrl, username, caption, likesCount, isLiked, onLikeToggle, onComment, comments }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-[500px] mx-auto border rounded-lg overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-10 h-10 rounded-full mr-4", src: profileImageUrl, alt: `${username}'s profile`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, username)), /*#__PURE__*/ React.createElement("img", { className: "w-full", src: imageUrl, alt: "Post content by ${username}", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#FAFAFA]", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "focus:outline-none", onClick: onLikeToggle, __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, isLiked ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-red-600 mr-2", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "far fa-heart mr-2", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, likesCount, " likes")), /*#__PURE__*/ React.createElement("p", { className: "break-words", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, caption), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: onComment, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 w-full rounded", type: "text", placeholder: "Add a comment...", name: "comment", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, comments && comments.map((comment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, comment.username, ":"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, comment.text)))))); } function StoryComponent() { const [isLiked, setIsLiked] = React.useState(false); const [likesCount, setLikesCount] = React.useState(123); const [comments, setComments] = React.useState([ { username: "user1", text: "Nice post!" } ]); const toggleLike = ()=>{ setIsLiked(!isLiked); setLikesCount((prev)=>isLiked ? prev - 1 : prev + 1); }; const handleComment = (event)=>{ event.preventDefault(); const newComment = { username: "new_commenter", text: event.target.comment.value }; setComments((prevComments)=>[ ...prevComments, newComment ]); event.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { imageUrl: "https://via.placeholder.com/500", profileImageUrl: "https://via.placeholder.com/150/0000FF/808080", username: "johndoe", caption: "This is a beautiful day 🌞", likesCount: likesCount, isLiked: isLiked, onLikeToggle: toggleLike, onComment: handleComment, comments: comments, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this })); }