function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [marketTab, setMarketTab] = React.useState('stockMarket'); const handleLogin = (e)=>{ e.preventDefault(); setIsLoggedIn(true); }; const switchTab = (tab)=>{ setMarketTab(tab); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#343a40] p-4 text-white font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Trading Software"), isLoggedIn && /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `text-lg px-2 py-1 font-roboto ${marketTab === 'stockMarket' ? 'text-blue-500' : 'text-white'}`, onClick: ()=>switchTab('stockMarket'), __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "StockMarket Live"), /*#__PURE__*/ React.createElement("button", { className: `text-lg px-2 py-1 font-roboto ${marketTab === 'cryptoMarket' ? 'text-blue-500' : 'text-white'}`, onClick: ()=>switchTab('cryptoMarket'), __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "CryptoMarket Live"))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "max-w-[300px] mx-auto my-10", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block mb-2 text-sm font-bold text-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "username", name: "username", className: "w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block mb-2 text-sm font-bold text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", className: "w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Sign In"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, marketTab === 'stockMarket' && /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "All Markets Overview"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }, "Dow Jones"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }, "+0.56%")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, "NASDAQ"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-red-500", __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this }, "-0.33%")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, "S&P 500"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, "+0.72%")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }, "Russell 2000"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, "+1.15%")))), marketTab === 'cryptoMarket' && /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "CryptoMarket Live"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, "Bitcoin"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, "+3.05%")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, "Ethereum"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-red-500", __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this }, "-1.75%")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, "Ripple"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, "+2.23%")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 21 }, __self: this }, "Litecoin"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-green-500", __source: { fileName: "", lineNumber: 95, columnNumber: 21 }, __self: this }, "+4.12%"))))))); }