function MainComponent() { const [searchQuery, setSearchQuery] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen text-white flex", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed left-0 h-screen w-[245px] border-r border-[#262626] py-2 px-3", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-4 mb-6", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/trenchstagram.png", alt: "Trenchstagram", className: "h-[29px]", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-1", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-[22px]", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "/search", className: "flex items-center gap-4 p-3 rounded-lg bg-[#121212]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-[22px]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-compass text-[22px]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("a", { href: "/reels", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film text-[22px]", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Reels")), /*#__PURE__*/ React.createElement("a", { href: "/messages", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-paper-plane text-[22px]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Messages")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart text-[22px]", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-square-plus text-[22px]", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Create")), /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/profile-pic.jpg", alt: "Profile", className: "w-[22px] h-[22px] rounded-full", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto pt-6", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center gap-4 p-3 rounded-lg hover:bg-[#121212]", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-[22px]", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[16px]", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "More")))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 ml-[245px] p-8", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[935px] mx-auto", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] rounded-lg p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-[#737373]", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "w-full bg-[#262626] rounded-lg pl-10 pr-4 py-2 focus:outline-none", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-[#737373]", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Search for people, hashtags, or interests")))); }