92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import { ICoinInfo } from "../utils/interfaces";
|
|
|
|
interface ICoinInfoProps {
|
|
coin: ICoinInfo;
|
|
}
|
|
|
|
const CoinInfo: React.FC<ICoinInfoProps> = ({ coin }) => {
|
|
|
|
return (
|
|
<>
|
|
<h1 className="coin-details-title">
|
|
{coin ? `${coin?.name} ${coin?.symbol.toUpperCase()}` : "Coin Details"}
|
|
</h1>
|
|
|
|
{coin && (
|
|
<>
|
|
<img src={coin?.image_large} alt={coin?.name} className="coin-details-image" />
|
|
<p className="coin-details-description">
|
|
{coin?.description?.split(". ")[0] + "."}
|
|
</p>
|
|
<div className="coin-details-info">
|
|
<h3>
|
|
Rank: <span># {coin.market_cap_rank}</span>
|
|
</h3>
|
|
<h3>
|
|
Current Price: {" "}
|
|
<span>
|
|
${coin.market_data.current_price.toLocaleString()}
|
|
</span>
|
|
</h3>
|
|
<h4>
|
|
Market Cap:{" "}
|
|
<span>${coin.market_data.market_cap.toLocaleString()}</span>
|
|
</h4>
|
|
<h4>
|
|
24h High:{" "}
|
|
<span>${coin.market_data.high_24h.toLocaleString()}</span>
|
|
</h4>
|
|
<h4>
|
|
24h Low:{" "}
|
|
<span>${coin.market_data.low_24h.toLocaleString()}</span>
|
|
</h4>
|
|
<h4>
|
|
24h Price Change:{" "}
|
|
<span>
|
|
${coin.market_data.price_change_24h.toFixed(2)} (
|
|
{coin.market_data.price_change_percentage_24h.toFixed(2)}%)
|
|
</span>
|
|
</h4>
|
|
{/*
|
|
<h4>
|
|
Circulating Supply:{" "}
|
|
<span>
|
|
{coin.market_data.circulating_supply.toLocaleString()}
|
|
</span>
|
|
</h4>
|
|
<h4>
|
|
Total Supply:{" "}
|
|
<span>
|
|
{coin.market_data.total_supply?.toLocaleString() || "N/A"}
|
|
</span>
|
|
</h4>
|
|
*/}
|
|
<h4>
|
|
All-Time High:{" "}
|
|
<span>
|
|
${coin.market_data.ath.toLocaleString()} on{" "}
|
|
{new Date(coin.market_data.ath_date).toLocaleDateString()}
|
|
</span>
|
|
</h4>
|
|
<h4>
|
|
All-Time Low:{" "}
|
|
<span>
|
|
${coin.market_data.atl.toLocaleString()} on{" "}
|
|
{new Date(coin.market_data.atl_date).toLocaleDateString()}
|
|
</span>
|
|
</h4>
|
|
<h4>
|
|
Last Updated:{" "}
|
|
<span>{new Date(coin.last_updated).toLocaleDateString()}</span>
|
|
</h4>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
}
|
|
|
|
|
|
export default CoinInfo; |