58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
interface Props {
|
|
title: string;
|
|
mean7d: number;
|
|
annualized: number;
|
|
accent: "blue" | "indigo" | "green";
|
|
}
|
|
|
|
const accentMap = {
|
|
blue: {
|
|
border: "border-blue-200",
|
|
bg: "bg-blue-50",
|
|
text: "text-blue-600",
|
|
label: "text-blue-700",
|
|
divider: "border-blue-100",
|
|
},
|
|
indigo: {
|
|
border: "border-indigo-200",
|
|
bg: "bg-indigo-50",
|
|
text: "text-indigo-600",
|
|
label: "text-indigo-700",
|
|
divider: "border-indigo-100",
|
|
},
|
|
green: {
|
|
border: "border-green-200",
|
|
bg: "bg-green-50",
|
|
text: "text-green-600",
|
|
label: "text-green-700",
|
|
divider: "border-green-100",
|
|
},
|
|
};
|
|
|
|
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-500"}`}>
|
|
{annualized >= 0 ? "+" : ""}{annualized.toFixed(2)}%
|
|
</p>
|
|
</div>
|
|
|
|
<div className={`pt-2 border-t ${c.divider}`}>
|
|
<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>
|
|
);
|
|
}
|