function MainComponent() { const [likes1, setLikes1] = React.useState(0); const [likes2, setLikes2] = React.useState(0); const handleLike1 = ()=>setLikes1((likes)=>likes + 1); const handleLike2 = ()=>setLikes2((likes)=>likes + 1); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#15202B] text-white", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 border-b border-[#38444D]", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-feather-alt", __source: { fileName: "", lineNumber: 11, columnNumber: 33 }, __self: this }), " Home"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white font-medium py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "つぶやき")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/user-avatar.png", alt: "User avatar", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "tweet", className: "bg-transparent border border-[#38444D] rounded-full w-full py-2 px-4", placeholder: "What's happening?", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/user-avatar-1.png", alt: "Avatar of user 1", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, "User Name"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, "@username"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, "·"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "1h")), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "We just launched our new product! 🚀 #excited"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mt-2", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#F91880]", onClick: handleLike1, __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, likes1)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/user-avatar-2.png", alt: "Avatar of user 2", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Another User"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "@anotheruser"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "·"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "2h")), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Exploring the city today! 😊"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mt-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#F91880]", onClick: handleLike2, __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, likes2)))))), /*#__PURE__*/ React.createElement("nav", { className: "flex justify-around items-center py-4 border-t border-[#38444D]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home fa-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search fa-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell fa-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope fa-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }))); }