function MainComponent() { const [marketData, setMarketData] = React.useState([ { name: 'Bitcoin (BTC)', price: 45000, change: 5.3 }, { name: 'Ethereum (ETH)', price: 3000, change: -2.1 }, { name: 'Cardano (ADA)', price: 1.2, change: 3.8 } ]); const handleTrade = (event)=>{ event.preventDefault(); const { crypto, amount, transactionType } = event.target.elements; console.log({ crypto: crypto.value, amount: amount.value, transactionType: transactionType.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-6 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] text-white p-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Crypto Trading App"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, "Market")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, "Portfolio")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "Settings"))))), /*#__PURE__*/ React.createElement("main", { className: "mt-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-white shadow-md rounded-lg p-6 mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Market Overview"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, marketData.map((crypto, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, crypto.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "$", crypto.price.toLocaleString()), /*#__PURE__*/ React.createElement("p", { className: crypto.change >= 0 ? "text-green-500" : "text-red-500", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, crypto.change > 0 ? "+" : "", crypto.change, "%"))))), /*#__PURE__*/ React.createElement("section", { className: "bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Trade"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleTrade, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "crypto", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Select Cryptocurrency"), /*#__PURE__*/ React.createElement("select", { name: "crypto", className: "w-full p-2.5 border rounded-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, marketData.map((crypto, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: crypto.name.toLowerCase().split(' ')[0], __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, crypto.name)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "amount", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", className: "w-full p-2.5 border rounded-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "transactionType", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Transaction Type"), /*#__PURE__*/ React.createElement("select", { name: "transactionType", className: "w-full p-2.5 border rounded-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "buy", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Buy"), /*#__PURE__*/ React.createElement("option", { value: "sell", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "Sell"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#010101] text-white p-2.5 rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Execute Trade")))), /*#__PURE__*/ React.createElement("footer", { className: "text-center mt-12 text-gray-600", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "© 2023 Crypto Trading App. All rights reserved."))); }