大更新

2026-02-04 12:56:06 +08:00
parent 098a91f2ac
commit 4f2ff3f3ba
535 changed files with 11908 additions and 15540 deletions
--- a/components/lending/LendingStats.tsx
+++ b/components/lending/LendingStats.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function LendingStats() {
+  const { t } = useApp();
+
+  // Mini bar chart data (heights in percentage)
+  const chartBars = [
+    { height: 40, color: "#f2fcf7" },
+    { height: 55, color: "#e1f8ec" },
+    { height: 45, color: "#cef3e0" },
+    { height: 65, color: "#b8ecd2" },
+    { height: 80, color: "#00ad76" },
+    { height: 95, color: "#10b981" },
+  ];
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex items-center gap-6 h-[180px]">
+      {/* Left Section - USDC Borrowed and Avg. APY */}
+      <div className="flex items-center gap-12 flex-1">
+        {/* USDC Borrowed */}
+        <div className="flex flex-col gap-1">
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("lending.usdcBorrowed")}
+          </span>
+          <span className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
+            $125.2M
+          </span>
+          <div className="flex items-center gap-1">
+            <Image src="/icon0.svg" alt="" width={14} height={14} />
+            <span className="text-[12px] font-medium text-[#10b981] dark:text-green-400 leading-[16px]">
+              +12% {t("lending.vsLastMonth")}
+            </span>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="w-px h-12 bg-border-gray dark:bg-gray-600" />
+
+        {/* Avg. APY */}
+        <div className="flex flex-col gap-1">
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("lending.avgApy")}
+          </span>
+          <span className="text-heading-h2 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.01em]">
+            20.5%
+          </span>
+          <div className="flex items-center h-4">
+            <span className="text-[12px] font-regular text-text-tertiary dark:text-gray-400 leading-[16px]">
+              {t("lending.stableYield")}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Section - Mini Chart */}
+      <div className="flex items-end gap-1 w-48 h-16">
+        {chartBars.map((bar, index) => (
+          <div
+            key={index}
+            className="flex-1 rounded-t-md transition-all"
+            style={{
+              backgroundColor: bar.color,
+              height: `${bar.height}%`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}