function MainComponent() { const menuItems = [ { id: 1, iconClass: "fa fa-home", text: "Home", textColor: "#4B5563" }, { id: 2, iconClass: "fa fa-compass", text: "Explore", textColor: "#4B5563" }, { id: 3, iconClass: "fa fa-user-circle", text: "Profile", textColor: "#4B5563" }, { id: 4, iconClass: "fa fa-cog", text: "Settings", textColor: "#4B5563" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F9FAFB] font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1F2937] py-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center px-4", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "logo", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-[#F9FAFB]", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "Sora Clone")), /*#__PURE__*/ React.createElement("div", { className: "icons flex space-x-4", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("i", { key: item.id, className: `${item.iconClass} text-xl text-[${item.textColor}]`, __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 my-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-1", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow rounded-lg p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Navigation"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "my-2", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${item.iconClass} mr-2 text-[${item.textColor}]`, __source: { fileName: "", lineNumber: 31, columnNumber: 21 }, __self: this }), item.text))))), /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg mb-4 p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Welcome to Sora Clone"), /*#__PURE__*/ React.createElement("p", { className: "text-md", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Discover a vast universe of media content."))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1F2937] py-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center text-xs text-[#F9FAFB]", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "© 2023 Sora Clone"))); }