AntDesign.jsx

import React, { useEffect, useState } from "react";
import { Table } from "antd";


const columns = [
  {
    title: "Rank",
    dataIndex: "rank",
    key: "rank",
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: (text, record) => (
      <a
        href={`https://www.coingecko.com/en/coins/${record.id}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        {text}
      </a>
    ),
  },
  {
    title: "Price (USD)",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "24h Change",
    dataIndex: "change",
    key: "change",
    render: (text, record) => {
      const color = record.change > 0 ? "green" : "red";
      return <span style={{ color }}>{`${record.change}%`}</span>;
    },
  },
];


const CryptoTable = () => {
  const [dataSource, setDataSource] = useState([]);


  useEffect(() => {
    const fetchTopCryptos = async () => {
      try {
        const response = await fetch(
          "https://cors-anywhere.herokuapp.com/https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=5&page=1&sparkline=false"
        );
        const data = await response.json();
        const formattedData = data.map((crypto, index) => ({
          key: crypto.id,
          rank: index + 1,
          name: crypto.name,
          price: `$${crypto.current_price.toLocaleString()}`,
          change: parseFloat(crypto.price_change_percentage_24h).toFixed(2),
          id: crypto.id,
        }));
        setDataSource(formattedData);
      } catch (error) {
        console.error(error);
      }
    };
    fetchTopCryptos();
  }, []);


  return (
    <div style={{ overflowX: "auto", marginLeft: 100 }}>
      <h1>Crypto Price Table</h1>
      <Table
        columns={columns}
        dataSource={dataSource}
        style={{ width: 500, margin: "auto" }}
      />
      ;
    </div>
  );
};


export default CryptoTable;