60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { RateData } from "@/lib/api";
|
|
|
|
interface Props {
|
|
asset: "BTC" | "ETH";
|
|
data: RateData | null;
|
|
}
|
|
|
|
const ASSET_EMOJI: Record<string, string> = { BTC: "₿", ETH: "Ξ" };
|
|
|
|
export default function RateCard({ asset, data }: Props) {
|
|
const rate = data?.lastFundingRate ?? null;
|
|
const positive = rate !== null && rate >= 0;
|
|
const rateColor = rate === null ? "text-slate-400" : positive ? "text-emerald-600" : "text-red-500";
|
|
const badgeColor = rate === null
|
|
? "bg-slate-100 text-slate-500"
|
|
: positive
|
|
? "bg-emerald-50 text-emerald-700 border border-emerald-200"
|
|
: "bg-red-50 text-red-600 border border-red-200";
|
|
|
|
const nextTime = data?.nextFundingTime
|
|
? new Date(data.nextFundingTime).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })
|
|
: "--";
|
|
|
|
return (
|
|
<div className="rounded-xl border border-slate-200 bg-white shadow-sm p-6 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-2xl font-bold text-slate-700">{ASSET_EMOJI[asset]}</span>
|
|
<span className="text-lg font-semibold text-slate-800">{asset}/USDT</span>
|
|
</div>
|
|
<span className={`text-xs px-2 py-1 rounded-full font-medium ${badgeColor}`}>
|
|
{rate === null ? "加载中" : positive ? "正费率 收款" : "负费率 付款"}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-slate-400 text-xs mb-1">当前资金费率</p>
|
|
<p className={`text-3xl font-mono font-bold ${rateColor}`}>
|
|
{rate === null ? "--" : `${(rate * 100).toFixed(4)}%`}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3 pt-2 border-t border-slate-100">
|
|
<div>
|
|
<p className="text-slate-400 text-xs">标记价格</p>
|
|
<p className="text-slate-700 font-mono text-sm mt-0.5">
|
|
${data ? Number(data.markPrice).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "--"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-slate-400 text-xs">下次结算</p>
|
|
<p className="text-blue-600 font-mono text-sm mt-0.5">{nextTime}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|