大更新

2026-02-04 12:56:06 +08:00
parent 098a91f2ac
commit 4f2ff3f3ba
535 changed files with 11908 additions and 15540 deletions
--- a/components/points/TeamTVLCard.tsx
+++ b/components/points/TeamTVLCard.tsx
@@ -0,0 +1,98 @@
+import Image from "next/image";
+
+interface RoleIndicator {
+  icon: string;
+  label: string;
+  current: number;
+  total: number;
+}
+
+interface TeamTVLCardProps {
+  currentTVL: string;
+  totalTVL: string;
+  progressPercent: number;
+  members: number;
+  roles: RoleIndicator[];
+}
+
+export default function TeamTVLCard({
+  currentTVL = "$8.5M",
+  totalTVL = "$10M",
+  progressPercent = 85,
+  members = 12,
+  roles = [
+    { icon: "/icon-whale.svg", label: "Whales", current: 3, total: 3 },
+    { icon: "/icon-trader.svg", label: "Traders", current: 0, total: 3 },
+    { icon: "/icon-user.svg", label: "Users", current: 5, total: 3 },
+  ],
+}: TeamTVLCardProps) {
+  return (
+    <div className="flex-[32] bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6 relative">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Image src="/icon0.svg" alt="" width={24} height={24} />
+        <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
+          Team TVL Reward
+        </span>
+      </div>
+
+      {/* Description */}
+      <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+        Were you invited? Enter the code here to boost your base yield by +0.5%.
+      </p>
+
+      {/* Progress Section */}
+      <div className="flex flex-col gap-4">
+        {/* TVL Info */}
+        <div className="flex flex-col gap-1">
+          <div className="flex items-start justify-between">
+            <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              CURRENT TEAM TVL
+            </span>
+            <span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
+              {currentTVL} / {totalTVL}
+            </span>
+          </div>
+
+          {/* Progress Bar */}
+          <div className="relative w-full h-2 bg-[#f3f4f6] dark:bg-gray-700 rounded-full overflow-hidden">
+            <div
+              className="absolute left-0 top-0 h-full rounded-full"
+              style={{
+                width: `${progressPercent}%`,
+                background: "linear-gradient(90deg, rgba(20, 71, 230, 1) 0%, rgba(3, 43, 189, 1) 100%)"
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Role Indicators */}
+        <div className="flex items-center gap-2">
+          {roles.map((role, index) => (
+            <div
+              key={index}
+              className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-2 flex flex-col items-center justify-center gap-0"
+            >
+              <div className="flex items-center justify-center h-4">
+                <Image src={role.icon} alt={role.label} width={16} height={16} />
+              </div>
+              <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                {role.label}
+              </span>
+              <span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
+                {role.current}/{role.total}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Members Badge */}
+      <div className="absolute right-6 top-8 bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
+        <span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
+          {members} Members
+        </span>
+      </div>
+    </div>
+  );
+}