function MainComponent({ user, tweet, time, likes, retweets }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.image, alt: `Profile of ${user.name}`, className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-[#1DA1F2]", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 ml-2", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, "@", user.username)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, time)), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, tweet), /*#__PURE__*/ React.createElement("div", { className: "flex justify-start items-center mt-4 space-x-6 text-sm text-gray-500", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, likes)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-retweet", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, retweets)))))); } function TweetInput({ onSubmit }) { const [tweet, setTweet] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (tweet.trim()) { onSubmit(tweet); setTweet(""); } }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "tweet", value: tweet, onChange: (e)=>setTweet(e.target.value), className: "w-full p-2 border border-gray-300 rounded resize-none", rows: "3", placeholder: "What's happening?", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 px-4 py-2 bg-[#1DA1F2] text-white rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Tweet")); } function StoryComponent() { const [tweets, setTweets] = React.useState([ { user: { name: "John Doe", username: "johndoe", image: "profile_image.jpg" }, tweet: "This is an example tweet showing how the Twitter-like web service looks.", time: "2h", likes: 20, retweets: 5 }, { user: { name: "Jane Smith", username: "janesmith", image: "profile_image2.jpg" }, tweet: "Another tweet example to demonstrate the component.", time: "1h", likes: 45, retweets: 10 } ]); const handleNewTweet = (tweet)=>{ const newTweet = { user: { name: "Current User", username: "currentuser", image: "current_user_image.jpg" }, tweet, time: "now", likes: 0, retweets: 0 }; setTweets([ newTweet, ...tweets ]); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TweetInput, { onSubmit: handleNewTweet, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }), tweets.map((tweet, index)=>/*#__PURE__*/ React.createElement(MainComponent, { key: index, ...tweet, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }))); }