46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import clsx from "clsx";
|
|
import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
|
|
import { formatPercentage } from "~/utils/format";
|
|
|
|
export function DescriptionSection({
|
|
currency
|
|
}: {
|
|
currency: CryptocurrencyDetailsResponse["currency"];
|
|
}) {
|
|
return (
|
|
<section className="mb-8 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="max-w-3xl">
|
|
<h2 className="text-base font-semibold text-slate-900">
|
|
{currency.name} ({currency.symbol})
|
|
</h2>
|
|
<p className="mt-2 text-sm leading-6 text-slate-600">
|
|
{currency.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 sm:items-end pt-3 md:pt-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-slate-500">Price</span>
|
|
<span className="text-2xl font-semibold tracking-tight sm:text-3xl">
|
|
${currency.price.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span
|
|
className={clsx(
|
|
"inline-flex items-center rounded-full px-3 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|