61 lines
2.6 KiB
TypeScript
61 lines
2.6 KiB
TypeScript
import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
|
|
import { formatPercentage } from "~/utils/format";
|
|
|
|
export function KeyStats({
|
|
currency
|
|
}: {
|
|
currency: CryptocurrencyDetailsResponse["currency"];
|
|
}) {
|
|
return (
|
|
<div className="lg:col-span-2 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
|
<div className="border-b border-slate-200 p-5">
|
|
<h2 className="text-base font-semibold text-slate-900">Key Stats</h2>
|
|
<p className="mt-1 text-xs text-slate-500">Basic market data.</p>
|
|
</div>
|
|
|
|
<div className="p-5">
|
|
<dl className="divide-y divide-slate-100">
|
|
<div className="flex items-center justify-between py-3">
|
|
<dt className="text-sm text-slate-600">Market Cap</dt>
|
|
<dd className="text-sm font-semibold text-slate-900">
|
|
${(currency.market_cap / 1_000_000_000).toLocaleString()}B
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between py-3">
|
|
<dt className="text-sm text-slate-600">Volume (24h)</dt>
|
|
<dd className="text-sm font-semibold text-slate-900">
|
|
${(currency.volume_24h / 1_000_000_000).toLocaleString()}B
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between py-3">
|
|
<dt className="text-sm text-slate-600">Circulating Supply</dt>
|
|
<dd className="text-sm font-semibold text-slate-900">
|
|
{(currency.circulating_supply / 1_000_000).toFixed(1)}M {currency.symbol}
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between py-3">
|
|
<dt className="text-sm text-slate-600">Max Supply</dt>
|
|
<dd className="text-sm font-semibold text-slate-900">
|
|
{currency.max_supply
|
|
? `${(currency.max_supply / 1_000_000).toFixed(1)}M ${currency.symbol}`
|
|
: "N/A"}
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between py-3">
|
|
<dt className="text-sm text-slate-600">Percent change (24h)</dt>
|
|
<dd className="text-sm font-semibold text-slate-900">
|
|
{formatPercentage(currency.percent_change_24h)}
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between py-3">
|
|
<dt className="text-sm text-slate-600">Percent change (7d)</dt>
|
|
<dd className="text-sm font-semibold text-slate-900">
|
|
{formatPercentage(currency.percent_change_7d)}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|