import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { motion } from 'framer-motion'; import { Coin, Search, RefreshCw } from 'lucide-react'; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, } from 'recharts'; const App = () => { const [coins, setCoins] = useState([]); const [filteredCoins, setFilteredCoins] = useState([]); const [search, setSearch] = useState(''); const [loading, setLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const [error, setError] = useState(null); const [chartData, setChartData] = useState([]); const fetchCoins = async () => { setLoading(true); setError(null); try { const response = await axios.get( 'https://api.coingecko.com/api/v3/coins/markets', { params: { vs_currency: 'usd', order: 'market_cap_desc', per_page: 50, page: 1, sparkline: false, }, } ); setCoins(response.data); setFilteredCoins(response.data); } catch (err) { setError('Failed to fetch data. Please try again.'); } finally { setLoading(false); } }; const fetchChartData = async (coinId) => { try { const response = await axios.get( `https://api.coingecko.com/api/v3/coins/${coinId}/market_chart`, { params: { vs_currency: 'usd', days: 7, }, } ); const prices = response.data.prices; const chartPoints = prices.map((point) => ({ time: new Date(point[0]).toLocaleString(), price: point[1], })); setChartData(chartPoints); } catch (err) { setChartData([]); } }; useEffect(() => { fetchCoins(); }, []); const handleSearch = (e) => { const query = e.target.value.toLowerCase(); setSearch(query); const filtered = coins.filter((coin) => coin.name.toLowerCase().includes(query) || coin.symbol.toLowerCase().includes(query) ); setFilteredCoins(filtered); }; const handleRefresh = async () => { setRefreshing(true); await fetchCoins(); setRefreshing(false); }; const handleCoinClick = (coin) => { fetchChartData(coin.id); }; return (
{/* Header */}

Crypto Vibe Dashboard

{/* Search Bar */}
{/* Error Message */} {error && (
{error}
)} {/* Loading */} {loading ? (
) : ( <> {/* Coins List */}
{filteredCoins.map((coin) => ( handleCoinClick(coin)} >
{coin.name}

{coin.name}

{coin.symbol.toUpperCase()}

${coin.current_price.toLocaleString()}

= 0 ? 'text-green-400' : 'text-red-500' } text-sm`} > {coin.price_change_percentage_24h.toFixed(2)}%

))}
{/* Chart Section */} {chartData.length > 0 && (

Price Chart (Last 7 days)

)} )} {/* Footer */}
); }; export default App;