function MainComponent() { const [tweets, setTweets] = React.useState([]); const [tweetInput, setTweetInput] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); if (tweetInput.trim() !== '') { const newTweet = { content: tweetInput, dateTime: new Date().toLocaleString() }; setTweets([ ...tweets, newTweet ]); setTweetInput(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1DA1F2] p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "🐦 Twitterみたいなページ")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[25%] bg-[#F5F8FA] p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }), " ホーム"), /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }), " 通知"), /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), " メッセージ"), /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }), " プロフィール"), /*#__PURE__*/ React.createElement("li", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-ellipsis-h", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), " もっと見る"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 border-x-2 border-[#E1E8ED] mx-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border-2 border-[#E1E8ED] rounded-md", name: "tweet", placeholder: "いまどうしてる？", value: tweetInput, onChange: (e)=>setTweetInput(e.target.value), __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white px-4 py-2 rounded-md float-right mt-2", type: "submit", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "ツイートする")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, tweets.map((tweet, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b border-[#E1E8ED] p-2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, tweet.content), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#657786]", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, tweet.dateTime)))))), /*#__PURE__*/ React.createElement("aside", { className: "w-[25%] p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "トレンド"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "トピック1"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "トピック2"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "トピック3"), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "トピック4"))))); }