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-400" : "text-red-400";
|
|
const badgeColor = rate === null
|
|
? "bg-slate-700 text-slate-300"
|
|
: positive
|
|
? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/30"
|
|
: "bg-red-500/20 text-red-300 border border-red-500/30";
|
|
|
|
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-700 bg-slate-800/60 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-200">{ASSET_EMOJI[asset]}</span>
|
|
<span className="text-lg font-semibold text-slate-200">{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-700">
|
|
<div>
|
|
<p className="text-slate-500 text-xs">标记价格</p>
|
|
<p className="text-slate-200 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-500 text-xs">下次结算</p>
|
|
<p className="text-cyan-400 font-mono text-sm mt-0.5">{nextTime}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|