function MainComponent() { const [dogecoinPrice, setDogecoinPrice] = React.useState("0.056"); const [inputValue, setInputValue] = React.useState(""); const [convertedValue, setConvertedValue] = React.useState(""); const [conversionRate, setConversionRate] = React.useState({}); const [selectedCurrency, setSelectedCurrency] = React.useState(""); React.useEffect(()=>{ async function fetchDogecoinPrice() { const response = await fetch("https://api.coingecko.com/api/v3/simple/price?ids=dogecoin&vs_currencies=usd"); const data = await response.json(); setDogecoinPrice(data.dogecoin.usd.toFixed(3)); } async function fetchConversionRates() { const response = await fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,litecoin,tether,usd,eur,jpy,gbp,rub&vs_currencies=dogecoin"); const data = await response.json(); setConversionRate({ btc: data.bitcoin.dogecoin, eth: data.ethereum.dogecoin, ltc: data.litecoin.dogecoin, usdt: data.tether.dogecoin, usd: data.usd.dogecoin, eur: data.eur.dogecoin, jpy: data.jpy.dogecoin, gbp: data.gbp.dogecoin, rub: data.rub.dogecoin }); } fetchDogecoinPrice(); fetchConversionRates(); const interval = setInterval(fetchDogecoinPrice, 60000); return ()=>clearInterval(interval); }, []); const handleCurrencyChange = (event)=>{ const { value } = event.target; setSelectedCurrency(value); }; const handleAmountChange = (event)=>{ const { value } = event.target; setInputValue(value); if (value && selectedCurrency) { setConvertedValue((value * conversionRate[selectedCurrency]).toFixed(3)); } else { setConvertedValue(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#cb9800] p-4 font-ubuntu-mono", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 text-black", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Dogecoin Price"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg", alt: "Doge meme on the left", className: "w-[100px] h-[100px] rounded-full", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold p-4 mx-4 bg-white border rounded shadow text-black", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "$", dogecoinPrice), /*#__PURE__*/ React.createElement("img", { src: "https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg", alt: "Doge meme on the right", className: "w-[100px] h-[100px] rounded-full", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold mb-4 text-black", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Convert to Dogecoin"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: handleCurrencyChange, name: "currency", className: "block w-full p-2 mb-4 border rounded", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Select currency"), /*#__PURE__*/ React.createElement("option", { value: "btc", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Bitcoin (BTC)"), /*#__PURE__*/ React.createElement("option", { value: "eth", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Ethereum (ETH)"), /*#__PURE__*/ React.createElement("option", { value: "ltc", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Litecoin (LTC)"), /*#__PURE__*/ React.createElement("option", { value: "usdt", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Tether (USDT)"), /*#__PURE__*/ React.createElement("option", { value: "usd", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "USD"), /*#__PURE__*/ React.createElement("option", { value: "eur", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "EUR"), /*#__PURE__*/ React.createElement("option", { value: "jpy", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "JPY"), /*#__PURE__*/ React.createElement("option", { value: "gbp", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "GBP"), /*#__PURE__*/ React.createElement("option", { value: "rub", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "RUB")), /*#__PURE__*/ React.createElement("input", { type: "number", value: inputValue, onChange: handleAmountChange, name: "currency_value", placeholder: "Enter amount", className: "block w-full p-2 mb-4 border rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold text-black", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, inputValue && `Converted Value in DOGE: ${convertedValue}`))); }