Initial commit

app/pages/crypto-details/KeyStats.tsx

@@ -0,0 +1,60 @@
+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>
+  );
+}