function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, user: "ユーザー1", content: "これはツイートの例です。" }, { id: 2, user: "ユーザー2", content: "別のツイートの例です。" } ]); const [newTweet, setNewTweet] = React.useState(""); const handleTweetChange = (e)=>setNewTweet(e.target.value); const handleTweetSubmit = (e)=>{ e.preventDefault(); if (newTweet.trim()) { const newTweetObj = { id: tweets.length + 1, user: "新しいユーザー", content: newTweet }; setTweets([ newTweetObj, ...tweets ]); setNewTweet(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] p-4 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1DA1F2] text-white p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "TwitterのWebサービス")), /*#__PURE__*/ React.createElement("main", { className: "my-4 max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "新しいツイート"), /*#__PURE__*/ React.createElement("form", { className: "mt-2", onSubmit: handleTweetSubmit, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "tweetContent", className: "w-full p-2 border rounded", placeholder: "今どうしてる？", value: newTweet, onChange: handleTweetChange, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1DA1F2] text-white p-2 rounded mt-2 w-full", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "ツイート"))), /*#__PURE__*/ React.createElement("section", { className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "bg-white p-4 rounded shadow-md mt-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, tweet.user), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, tweet.content))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1DA1F2] text-white p-4 mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "© 2023 TwitterのWebサービス"))); }