function MainComponent() { const [tweets, setTweets] = React.useState([]); const [tweetContent, setTweetContent] = React.useState(""); const handleTweetChange = (event)=>{ setTweetContent(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); if (!tweetContent.trim()) return; const newTweet = { id: Date.now(), content: tweetContent }; setTweets([ newTweet, ...tweets ]); setTweetContent(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#E8F5FE]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "px-4 py-2 bg-[#1DA1F2] text-white font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "ツイクローン"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1A8CD8] px-4 py-2 rounded-full mr-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1A8CD8] px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "登録")))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto grid grid-cols-1 md:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "col-span-1", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-[#1DA1F2] font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home fa-fw mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 86 }, __self: this }), "ホーム")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-[#1DA1F2] font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag fa-fw mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 86 }, __self: this }), "探索")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-[#1DA1F2] font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell fa-fw mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 86 }, __self: this }), "通知")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-[#1DA1F2] font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope fa-fw mr-2", __source: { fileName: "", lineNumber: 34, columnNumber: 86 }, __self: this }), "メッセージ")))), /*#__PURE__*/ React.createElement("section", { className: "col-span-1 md:col-span-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "tweetContent", value: tweetContent, onChange: handleTweetChange, className: "w-full p-2 border border-gray-300 rounded-md font-roboto", placeholder: "いまどうしてる？", rows: "4", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1DA1F2] text-white px-4 py-2 rounded-full float-right", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "ツイートする"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, tweet.content)))))), /*#__PURE__*/ React.createElement("footer", { className: "px-4 py-2 bg-[#1DA1F2] text-white font-roboto text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "© 2023 ツイクローン All Rights Reserved.")); }