initial commit

components/transparency/TransparencyStats.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useApp } from "@/contexts/AppContext";
+
+interface CircleProgressProps {
+  percentage: number;
+  color: string;
+  percentageText: string;
+}
+
+function CircleProgress({ percentage, color, percentageText }: CircleProgressProps) {
+  const size = 50;
+  const strokeWidth = 4;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const offset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="relative flex items-center justify-center flex-shrink-0" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="transform -rotate-90">
+        {/* 背景圆环 - 浅色轨道 */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className="text-slate-200/30 dark:text-gray-600"
+        />
+
+        {/* 进度圆环 - 填充部分 */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          style={{
+            strokeDashoffset: offset,
+            transition: 'stroke-dashoffset 1s ease-in-out',
+            strokeLinecap: 'round'
+          }}
+        />
+      </svg>
+
+      {/* 中间的百分比文字 */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {percentageText}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default function TransparencyStats() {
+  const { t } = useApp();
+
+  const stats = [
+    {
+      labelKey: "transparency.totalUsdcSupply",
+      value: "$200.4M",
+      percentage: 52.7,
+      percentageText: "52.7%",
+      percentageColor: "text-[#1447e6]",
+      circleColor: "#1447e6",
+    },
+    {
+      labelKey: "transparency.utilization",
+      value: "$140.0M",
+      percentage: 30.1,
+      percentageText: "30.1%",
+      percentageColor: "text-[#ff6900]",
+      circleColor: "#ff6900",
+    },
+    {
+      labelKey: "transparency.activeLoans",
+      value: "$80.0M",
+      percentage: 17.2,
+      percentageText: "17.2%",
+      percentageColor: "text-[#10b981]",
+      circleColor: "#10b981",
+    },
+  ];
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
+      {/* Total Reserves */}
+      <div className="flex flex-col gap-2">
+        <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {t("transparency.totalReserves")}
+        </span>
+        <span className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
+          $465,000,000
+        </span>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="flex gap-4">
+        {stats.map((stat, index) => (
+          <div
+            key={index}
+            className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex items-center justify-between"
+          >
+            {/* Left - Text Info */}
+            <div className="flex flex-col gap-2">
+              {/* Label */}
+              <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                {t(stat.labelKey)}
+              </span>
+
+              {/* Value */}
+              <span className="text-[20px] font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+                {stat.value}
+              </span>
+
+              {/* Percentage */}
+              <span className={`text-[12px] font-medium leading-[150%] tracking-[0.01em] ${stat.percentageColor}`}>
+                {stat.percentageText}
+              </span>
+            </div>
+
+            {/* Right - Circle Chart */}
+            <CircleProgress
+              percentage={stat.percentage}
+              color={stat.circleColor}
+              percentageText={stat.percentageText}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}