function MainComponent() { const [tweets, setTweets] = React.useState([]); const [profile, setProfile] = React.useState({ name: "username123", avatar: "/irony.png" }); const [selectedTab, setSelectedTab] = React.useState("timeline"); const inputRef = React.useRef(null); const icons = [ "/irony.png", "/god.png", "/commoner.png", "/boss.png", "/sea.png", "/dog.png", "/cat.png", "/bird.png", "/mountain.png", "/computer.png", "/shark.png", "/octopus.png", "/sky.png", "/prisoner.png", "/fan.png", "/machine.png", "/fireplace.png", "/gun.png", "/sword.png", "/book.png" ]; const handleTweet = ()=>{ const currentText = inputRef.current.value; if (currentText) { const newTweet = { text: currentText, postedAt: new Date().toLocaleString(), username: profile.name, avatar: profile.avatar, hide: false }; setTweets([ ...tweets, newTweet ]); inputRef.current.value = ""; } }; const toggleTweetVisibility = (index)=>{ const updatedTweets = tweets.map((tweet, idx)=>idx === index ? { ...tweet, hide: !tweet.hide } : tweet); setTweets(updatedTweets); }; const handleProfileChange = (e)=>{ const { name, value } = e.target; setProfile({ ...profile, [name]: value }); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1DA1F2] p-4 text-white text-center text-xl font-semibold", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "Twitter styled UI"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[200px] bg-gray-100 p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer ${selectedTab === "profile" ? "text-blue-500" : ""}`, onClick: ()=>setSelectedTab("profile"), __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "プロフィール"), /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer ${selectedTab === "timeline" ? "text-blue-500" : ""}`, onClick: ()=>setSelectedTab("timeline"), __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "タイムライン"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, selectedTab === "profile" ? /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[100px] h-[100px] rounded-full", src: profile.avatar, alt: `Profile Image of ${profile.name}`, __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "ml-4 p-2 border border-gray-300", value: profile.name, name: "name", onChange: handleProfileChange, placeholder: "アカウント名", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("select", { name: "avatar", value: profile.avatar, onChange: handleProfileChange, className: "w-full p-2 border border-gray-300", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, icons.map((icon)=>/*#__PURE__*/ React.createElement("option", { key: icon, value: icon, __source: { fileName: "", lineNumber: 59, columnNumber: 37 }, __self: this }, icon)))) : /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shrink-0", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[50px] h-[50px] rounded-full", src: profile.avatar, alt: "User Avatar", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border border-gray-200 rounded", placeholder: "いまどうしてる？", ref: inputRef, __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded-full", onClick: handleTweet, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "ツイートする")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, tweets.map((tweet, index)=>!tweet.hide && /*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 34 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-[30px] h-[30px] rounded-full", src: tweet.avatar, alt: `Tweet by ${tweet.username}`, __source: { fileName: "", lineNumber: 78, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 79, columnNumber: 23 }, __self: this }, tweet.username)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, tweet.text), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, tweet.postedAt), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleTweetVisibility(index), className: "text-xs text-blue-500", __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, tweet.hide ? '表示する' : '非表示にする')))))))); }