49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useApp } from "@/contexts/AppContext";
|
|
|
|
export default function ALPStatsCards() {
|
|
const { t } = useApp();
|
|
|
|
const stats = [
|
|
{
|
|
label: t("stats.totalValueLocked"),
|
|
value: "$465.0M",
|
|
isGreen: false,
|
|
},
|
|
{
|
|
label: t("alp.price"),
|
|
value: "$1.23",
|
|
isGreen: false,
|
|
},
|
|
{
|
|
label: t("alp.poolAPR"),
|
|
value: "27.36%",
|
|
isGreen: true,
|
|
},
|
|
{
|
|
label: t("alp.rewardAPR"),
|
|
value: "8.23%",
|
|
isGreen: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-[1fr_1fr_1fr_1fr] gap-4">
|
|
{stats.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-bg-subtle dark:bg-gray-800 rounded-2xl border border-border-gray dark:border-gray-700 px-6 py-4 flex flex-col gap-2"
|
|
>
|
|
<div className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400">
|
|
{stat.label}
|
|
</div>
|
|
<div className={`text-[32px] font-bold leading-[130%] tracking-[-0.01em] ${stat.isGreen ? 'text-[#10b981]' : 'text-text-primary dark:text-white'}`}>
|
|
{stat.value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|