37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { Link } from "react-router";
|
|
import { nameShorten } from "../utils/string-helper";
|
|
import { ICoinMarketData } from "../utils/interfaces";
|
|
|
|
interface ICoin {
|
|
coin: ICoinMarketData;
|
|
}
|
|
|
|
const CoinCard: React.FC<ICoin> = ({ coin }) => {
|
|
|
|
return (
|
|
<Link to={`/coin/${coin.id}`} >
|
|
<div className="coin-card">
|
|
<div className="coin-header">
|
|
<img src={coin.image} alt={coin.name} className="coin-image" />
|
|
<h2>{nameShorten(coin.name)}</h2>
|
|
<p className="symbol">{coin.symbol.toUpperCase()}</p>
|
|
</div>
|
|
<p>
|
|
Price: <span>$ {coin.current_price.toLocaleString()}</span>
|
|
</p>
|
|
<p className={coin.price_change_percentage_24h >= 0 ? 'positive' : 'negative'}>
|
|
{/* coin.price_change_percentage_24h.toFixed(2) */}
|
|
{/* {parseFloat(coin?.price_change_percentage_24h || 0).toFixed(2)} */}
|
|
{coin.price_change_percentage_24h.toFixed(2)} %
|
|
</p>
|
|
<p>
|
|
Market Cap: <span>{coin?.market_cap.toLocaleString()}</span>
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
|
|
export default CoinCard; |