function MainComponent() { const [cartCount, setCartCount] = React.useState(0); const [darkMode, setDarkMode] = React.useState(false); function addToCart() { setCartCount((prevCount)=>prevCount + 1); } function toggleDarkMode() { setDarkMode((prevMode)=>!prevMode); } const darkModeClasses = darkMode ? 'bg-[#181818] text-white' : 'bg-[#f7f7f7] text-[#121212]'; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center justify-center min-h-screen ${darkModeClasses} transition-all duration-300`, __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: `w-full p-4 ${darkMode ? 'bg-[#121212]' : 'bg-[#ffffff]'} shadow-md`, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "StreamIt"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: `mr-4 p-2 ${darkMode ? 'text-gray-300' : 'text-gray-600'} hover:text-white transition-colors duration-300`, __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${darkMode ? 'fa-sun' : 'fa-moon'} text-xl`, __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user-circle text-2xl", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `absolute -top-2 -right-2 px-2 py-1 ${darkMode ? 'bg-[#e50914]' : 'bg-red-600'} text-white rounded-full text-xs font-roboto`, __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, cartCount))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: `w-full p-4 ${darkMode ? 'bg-[#121212]' : 'bg-[#ffffff]'} mt-auto`, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center font-roboto text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "© 2023 StreamIt. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` body { margin: 0; transition: background-color 0.3s ease; background-color: ${darkMode ? '#181818' : '#f7f7f7'}; } `)); }