function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, name: "ジョン・ドー", username: "@johndoe", text: "これはツイートです", profileImg: "/profile1.jpg" }, { id: 2, name: "ジェーン・スミス", username: "@janesmith", text: "こちらには別のツイートがあります", profileImg: "/profile2.jpg" } ]); const [tweetText, setTweetText] = React.useState(""); const [likes, setLikes] = React.useState({}); const [retweets, setRetweets] = React.useState({}); const handleTweetChange = (e)=>{ setTweetText(e.target.value); }; const handleTweetSubmit = ()=>{ if (tweetText.trim() !== "") { const newTweet = { id: tweets.length + 1, name: "新しいユーザー", username: "@newuser", text: tweetText, profileImg: "/profile.jpg" }; setTweets([ newTweet, ...tweets ]); setTweetText(""); } }; const handleLike = (id)=>{ setLikes((likes)=>({ ...likes, [id]: !likes[id] })); }; const handleRetweet = (id)=>{ setRetweets((retweets)=>({ ...retweets, [id]: !retweets[id] })); }; const iconClassLike = (id)=>likes[id] ? "fas fa-heart text-red-500" : "far fa-heart"; const iconClassRetweet = (id)=>retweets[id] ? "fas fa-retweet text-green-500" : "far fa-retweet"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-[#f5f8fa]", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-lg border border-gray-300 mt-6", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("i", { className: "fa fa-star text-blue-500", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/profile.jpg", alt: "ユーザーのプロフィール", className: "w-[48px] h-[48px] rounded-full mr-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "tweet", value: tweetText, onChange: handleTweetChange, placeholder: "今どうしてる？", className: "w-full h-[80px] p-2 border rounded-md", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleTweetSubmit, className: "ml-2 bg-blue-500 text-white font-roboto py-1 px-3 rounded-md", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "ツイート")), tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tweet.profileImg, alt: `${tweet.name}のプロフィール`, className: "w-[48px] h-[48px] rounded-full mr-4", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, tweet.name), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-gray-500", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, tweet.username)), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, tweet.text), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-gray-500 mt-2 text-sm", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-comment", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: iconClassRetweet(tweet.id), onClick: ()=>handleRetweet(tweet.id), __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: iconClassLike(tweet.id), onClick: ()=>handleLike(tweet.id), __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-share-square", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 w-full max-w-[600px] bg-white shadow-lg border-t border-gray-300", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around p-2", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-blue-500", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "ホーム")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "通知")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-users", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "グループ")), /*#__PURE__*/ React.createElement("button", { className: "flex flex-col items-center text-gray-500", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, "DM")))))); }