function MainComponent() { const [tweets, setTweets] = React.useState([ { id: 1, user: 'ユーザー1', handle: '@user1', text: 'これはサンプルツイートです。', image: './user1.jpg' }, { id: 2, user: 'ユーザー2', handle: '@user2', text: '別のツイートの例。', image: './user2.jpg' } ]); const [tweetText, setTweetText] = React.useState(""); const handleTweetChange = (e)=>{ setTweetText(e.target.value); }; const handleTweetSubmit = ()=>{ if (tweetText.trim()) { const newTweet = { id: tweets.length + 1, user: 'ユーザー3', handle: '@user3', text: tweetText, image: './profile_pic.jpg' }; setTweets([ newTweet, ...tweets ]); setTweetText(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1DA1F2] text-white p-4 font-bold text-xl font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "SNSサイト"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-6", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-[600px] p-6 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./profile_pic.jpg", alt: "ユーザープロフィール", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "tweet", value: tweetText, onChange: handleTweetChange, className: "w-full ml-4 p-2 border rounded-lg resize-none", placeholder: "今何してる？", rows: "3", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleTweetSubmit, className: "bg-[#1DA1F2] text-white font-roboto py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "ツイート"))), tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "w-full max-w-[600px] p-6 mt-6 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tweet.image, alt: `ユーザープロフィール${tweet.user}`, className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, tweet.user), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, tweet.handle), /*#__PURE__*/ React.createElement("div", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, tweet.text))))))); }