CryptoPulse

\n {/* Cryptocurrency Section */}\n {activeSection === \"crypto\" && (\n <>\n {loading ?

Loading cryptocurrency data...

: (\n

\n {coins.map(coin => (\n {\n setSelectedCoin(coin);\n fetchPriceHistory(coin.id, \"24h\");\n }}\n className={`p-4 rounded-lg cursor-pointer ${\n selectedCoin?.id === coin.id\n ? (darkMode ? \"bg-gray-700\" : \"bg-blue-100\")\n : (darkMode ? \"bg-gray-800\" : \"bg-white\")\n } shadow-md`}\n >\n

{coin.name} ({coin.symbol.toUpperCase()})

\n 0\n ? \"text-green-500\"\n : \"text-red-500\"\n }`}\n >\n ${coin.current_price.toLocaleString()}\n ({coin.price_change_percentage_24h.toFixed(2)}%)\n

\n ))}\n

\n\n {selectedCoin && (\n

\n {[\"24h\", \"15d\", \"30d\"].map(range => (\n fetchPriceHistory(selectedCoin.id, range)}\n className={`p-2 rounded ${\n selectedTimeRange === range\n ? (darkMode ? \"bg-blue-700 text-white\" : \"bg-blue-500 text-white\")\n : (darkMode ? \"bg-gray-700 text-gray-300\" : \"bg-gray-200 text-black\")\n }`}\n >\n {range} Chart\n \n ))}\n

\n {chartError\n ?

{chartError}

\n : (\n

\n \n

\n )}\n

Currency Converter

\n {/* From Currency Section */}\n

\n From Currency\n \n setCurrencySearchTerm(e.target.value)}\n className={`w-full p-2 mb-2 rounded ${darkMode ? \"bg-gray-700 text-white\" : \"bg-white text-black\"}`}\n />\n setFromCurrency(e.target.value)}\n className={`w-full p-2 rounded ${darkMode ? \"bg-gray-700 text-white\" : \"bg-white text-black\"}`}\n >\n {filteredCurrencies.map(currency => (\n \n ))}\n \n setAmount(Number(e.target.value))}\n className={`w-full p-2 mt-2 rounded ${darkMode ? \"bg-gray-700 text-white\" : \"bg-white text-black\"}`}\n />\n

\n\n {/* To Currency Section */}\n

\n To Currency\n setToCurrency(e.target.value)}\n className={`w-full p-2 rounded ${darkMode ? \"bg-gray-700 text-white\" : \"bg-white text-black\"}`}\n >\n {currencies.map(currency => (\n \n ))}\n \n \n {convertedAmount ? `${convertedAmount} ${toCurrency}` : \"Converted Amount\"}\n