function MainComponent({ tweets }) { const [comment, setComment] = React.useState(''); const [tweetContent, setTweetContent] = React.useState(''); const [allTweets, setAllTweets] = React.useState(tweets); const handleCommentChange = (e)=>{ setComment(e.target.value); }; const handleTweetChange = (e)=>{ setTweetContent(e.target.value); }; const handleTweetSubmit = ()=>{ if (tweetContent.trim() !== '') { const newTweet = { username: "New User", handle: "newuser", userImage: "/newuser.jpg", content: tweetContent.trim() }; setAllTweets([ newTweet, ...allTweets ]); setTweetContent(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-blue-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 my-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "tweetContent", value: tweetContent, onChange: handleTweetChange, placeholder: "今何してる？", className: "w-full p-2 border rounded-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleTweetSubmit, className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "投稿")), allTweets.map((tweet, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 my-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tweet.userImage, alt: `Profile image of ${tweet.username}`, className: "w-[50px] h-[50px] rounded-full mr-4", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, tweet.username), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 ml-2", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "@", tweet.handle))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, tweet.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-gray-500 mt-2", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-comment", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-retweet", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-heart", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-share-square", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "comment", value: comment, onChange: handleCommentChange, placeholder: "コメントを入力", className: "w-full p-2 border rounded-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }))))))); } function StoryComponent() { const tweets = [ { username: "User One", handle: "user1", userImage: "/user1.jpg", content: "This is the first tweet content." }, { username: "User Two", handle: "user2", userImage: "/user2.jpg", content: "This is the second tweet content." } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { tweets: tweets, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this })); }