function MainComponent() { const [amount, setAmount] = useState(""); const [fromCurrency, setFromCurrency] = useState("USD"); const [toCurrency, setToCurrency] = useState("EUR"); const [result, setResult] = useState(null); const [portfolio, setPortfolio] = useState([ { currency: "USD", amount: 5000 }, { currency: "EUR", amount: 3000 }, { currency: "GBP", amount: 2000 } ]); const [transactions, setTransactions] = useState([]); const [tradeAmount, setTradeAmount] = useState(""); const [tradeCurrency, setTradeCurrency] = useState("USD"); const currencies = [ { code: "USD", symbol: "$", name: "US Dollar" }, { code: "EUR", symbol: "€", name: "Euro" }, { code: "GBP", symbol: "£", name: "British Pound" }, { code: "JPY", symbol: "¥", name: "Japanese Yen" }, { code: "CNY", symbol: "¥", name: "Chinese Yuan" } ]; const handleConvert = ()=>{ const mockRate = Math.random() * 2; setResult(parseFloat(amount) * mockRate); }; const getTotalBalance = ()=>{ return portfolio.reduce((total, holding)=>total + holding.amount, 0); }; const handleTrade = (type)=>{ const newTransaction = { type, amount: parseFloat(tradeAmount), currency: tradeCurrency, date: new Date().toISOString(), rate: (Math.random() * (1.5 - 0.5) + 0.5).toFixed(4) }; setTransactions([ newTransaction, ...transactions ]); setTradeAmount(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-poppins text-[#1a1f36] mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Portfolio Overview"), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-[#2563eb] mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Total: $", getTotalBalance().toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, portfolio.map((holding)=>/*#__PURE__*/ React.createElement("div", { key: holding.currency, className: "bg-[#f8fafc] p-4 rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, holding.currency), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, holding.amount.toFixed(2)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-poppins text-[#1a1f36] mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Trading"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: tradeAmount, onChange: (e)=>setTradeAmount(e.target.value), placeholder: "Amount", className: "flex-1 p-3 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: tradeCurrency, onChange: (e)=>setTradeCurrency(e.target.value), className: "p-3 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, currencies.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, currency.code))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTrade("buy"), className: "px-6 py-3 bg-green-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Buy"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTrade("sell"), className: "px-6 py-3 bg-red-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Sell"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-poppins text-[#1a1f36] mb-6", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Currency Converter"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-6", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", value: amount, onChange: (e)=>setAmount(e.target.value), placeholder: "Enter amount", className: "w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex gap-4", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: fromCurrency, onChange: (e)=>setFromCurrency(e.target.value), className: "flex-1 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, currencies.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, currency.code, " - ", currency.symbol))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFromCurrency(toCurrency); setToCurrency(fromCurrency); }, className: "px-4 bg-gray-100 rounded-lg hover:bg-gray-200", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exchange-alt", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: toCurrency, onChange: (e)=>setToCurrency(e.target.value), className: "flex-1 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, currencies.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 154, columnNumber: 19 }, __self: this }, currency.code, " - ", currency.symbol))))), /*#__PURE__*/ React.createElement("button", { onClick: handleConvert, className: "w-full bg-[#2563eb] text-white py-3 rounded-lg hover:bg-[#1d4ed8] transition-colors", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "Convert"), result && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-[#f8fafc] rounded-lg", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold font-poppins text-lg text-[#1a1f36]", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, "Result:"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold font-poppins text-[#2563eb] mt-2", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, amount, " ", fromCurrency, " = ", result.toFixed(2), " ", toCurrency))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-poppins text-[#1a1f36] mb-4", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, "Transaction History"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "text-left p-2", __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this }, "Type"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, "Currency"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, "Rate"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2", __source: { fileName: "", lineNumber: 194, columnNumber: 19 }, __self: this }, "Date"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, transactions.map((tx, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 200, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: tx.type === "buy" ? "text-green-500" : "text-red-500", __source: { fileName: "", lineNumber: 201, columnNumber: 23 }, __self: this }, tx.type.toUpperCase())), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 209, columnNumber: 21 }, __self: this }, tx.amount), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, tx.currency), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 211, columnNumber: 21 }, __self: this }, tx.rate), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 212, columnNumber: 21 }, __self: this }, new Date(tx.date).toLocaleDateString()))))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 222, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-[#2563eb] text-2xl mb-2", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-poppins font-semibold", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, "Live Rates")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history text-[#2563eb] text-2xl mb-2", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-poppins font-semibold", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, "Rate History")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-[#2563eb] text-2xl mb-2", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-poppins font-semibold", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, "Rate Alerts"))))); }