function MainComponent() { const [postContent, setPostContent] = React.useState(""); const [posts, setPosts] = React.useState([]); const handlePostChange = (e)=>{ setPostContent(e.target.value); }; const handlePostSubmit = (e)=>{ e.preventDefault(); if (postContent.trim()) { setPosts([ { id: Date.now(), content: postContent, userName: "User Name", userHandle: "@username" }, ...posts ]); setPostContent(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-500 text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-sans", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "TwitterみたいなSNS"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-sans", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-sans", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-sans", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-sans", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, "Messages"))))), /*#__PURE__*/ React.createElement("main", { className: "flex justify-center mt-8", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl text-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded-lg shadow-md", onSubmit: handlePostSubmit, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "post", placeholder: "What's happening?", value: postContent, onChange: handlePostChange, className: "w-full h-[100px] p-2 border rounded-md font-sans", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-md font-sans", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Tweet"))), posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white p-6 rounded-lg shadow-md mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/profile-pic.jpg", alt: "your profile description", className: "w-[50px] h-[50px] rounded-full mr-4", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold font-sans", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, post.userName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-sans", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, post.userHandle))), /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 font-sans", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment", __source: { fileName: "", lineNumber: 55, columnNumber: 61 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 font-sans", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-retweet", __source: { fileName: "", lineNumber: 56, columnNumber: 61 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 font-sans", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 57, columnNumber: 61 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 font-sans", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share", __source: { fileName: "", lineNumber: 58, columnNumber: 61 }, __self: this })))))))); }