大更新

components/alp/ALPStatsCards.tsx

@@ -0,0 +1,48 @@
+"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>
+  );
+}