88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import clsx from "clsx";
|
|
import { Link } from "react-router";
|
|
import type {
|
|
CryptocurrenciesListResponse,
|
|
SimpleCryptoCurrency
|
|
} from "~/types/crypto-api";
|
|
import { formatPercentage } from "~/utils/format";
|
|
|
|
function PricingRow({
|
|
currency,
|
|
index
|
|
}: {
|
|
currency: SimpleCryptoCurrency;
|
|
index: number;
|
|
}) {
|
|
return (
|
|
<tr className="hover:bg-slate-50">
|
|
<td className="px-5 py-4 text-slate-500 hidden md:table-cell">
|
|
{index + 1}
|
|
</td>
|
|
<td className="px-5 py-4 flex items-center gap-3">
|
|
<Link className="flex flex-row gap-3" to={`/crypto/${currency.id}`}>
|
|
<img
|
|
className="h-8 w-8 rounded-full"
|
|
src={currency.logo}
|
|
alt={`${currency.name} Logo`}
|
|
/>
|
|
<div>
|
|
<p className="font-medium">{currency.name}</p>
|
|
<p className="text-xs text-slate-500">{currency.symbol}</p>
|
|
</div>
|
|
</Link>
|
|
</td>
|
|
<td className="px-5 py-4 font-medium">
|
|
${currency.price.toLocaleString()}
|
|
</td>
|
|
<td className="px-5 py-4 hidden md:table-cell">
|
|
${(currency.market_cap / 1_000_000_000).toFixed(1)}B
|
|
</td>
|
|
<td className="px-5 py-4 hidden md:table-cell">
|
|
${(currency.volume_24h / 1_000_000_000).toFixed(1)}B
|
|
</td>
|
|
<td className="px-5 py-4">
|
|
<span
|
|
className={clsx(
|
|
"rounded-full px-2 py-1 text-xs font-medium",
|
|
currency.percent_change_24h > 0
|
|
? "bg-emerald-100 text-emerald-700"
|
|
: "bg-rose-100 text-rose-700"
|
|
)}
|
|
>
|
|
{formatPercentage(currency.percent_change_24h)}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
export function PricingTable({
|
|
currencies
|
|
}: {
|
|
currencies: CryptocurrenciesListResponse["currencies"];
|
|
}) {
|
|
return (
|
|
<section className="mt-8 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full text-left text-sm">
|
|
<thead className="bg-slate-100 text-xs uppercase tracking-wider text-slate-600">
|
|
<tr>
|
|
<th className="px-5 py-3 hidden md:table-cell">#</th>
|
|
<th className="px-5 py-3">Asset</th>
|
|
<th className="px-5 py-3">Price</th>
|
|
<th className="px-5 py-3 hidden md:table-cell">Market cap</th>
|
|
<th className="px-5 py-3 hidden md:table-cell">Volume (24h)</th>
|
|
<th className="px-5 py-3">Change (24h)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{currencies.map((currency, index) => (
|
|
<PricingRow key={currency.id} currency={currency} index={index} />
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|