55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
interface Props {
|
|
title: string;
|
|
mean7d: number;
|
|
annualized: number;
|
|
accent: "cyan" | "violet" | "emerald";
|
|
}
|
|
|
|
const accentMap = {
|
|
cyan: {
|
|
border: "border-cyan-500/30",
|
|
bg: "bg-cyan-500/10",
|
|
text: "text-cyan-400",
|
|
label: "text-cyan-300",
|
|
},
|
|
violet: {
|
|
border: "border-violet-500/30",
|
|
bg: "bg-violet-500/10",
|
|
text: "text-violet-400",
|
|
label: "text-violet-300",
|
|
},
|
|
emerald: {
|
|
border: "border-emerald-500/30",
|
|
bg: "bg-emerald-500/10",
|
|
text: "text-emerald-400",
|
|
label: "text-emerald-300",
|
|
},
|
|
};
|
|
|
|
export default function StatsCard({ title, mean7d, annualized, accent }: Props) {
|
|
const c = accentMap[accent];
|
|
const isPositive = annualized >= 0;
|
|
|
|
return (
|
|
<div className={`rounded-xl border ${c.border} ${c.bg} p-5 space-y-3`}>
|
|
<h3 className={`text-sm font-medium ${c.label}`}>{title}</h3>
|
|
|
|
<div>
|
|
<p className="text-slate-400 text-xs">预估年化收益率</p>
|
|
<p className={`text-2xl font-bold font-mono mt-0.5 ${isPositive ? c.text : "text-red-400"}`}>
|
|
{annualized >= 0 ? "+" : ""}{annualized.toFixed(2)}%
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-slate-700/50">
|
|
<p className="text-slate-400 text-xs">7天均值费率</p>
|
|
<p className={`text-sm font-mono mt-0.5 ${c.text}`}>
|
|
{mean7d >= 0 ? "+" : ""}{mean7d.toFixed(4)}% / 8h
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|