大更新

2026-02-04 12:56:06 +08:00
parent 098a91f2ac
commit 4f2ff3f3ba
535 changed files with 11908 additions and 15540 deletions
--- a/components/fundmarket/StatsCards.tsx
+++ b/components/fundmarket/StatsCards.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import Image from "next/image";
+import { Card, CardBody } from "@heroui/react";
+
+interface StatData {
+  label: string;
+  value: string;
+  change: string;
+  isPositive: boolean;
+}
+
+interface StatsCardsProps {
+  stats?: StatData[];
+}
+
+export default function StatsCards({ stats = [] }: StatsCardsProps) {
+  if (!stats || stats.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-row gap-6 items-start justify-start self-stretch">
+      {stats.map((stat, index) => {
+        const isLastCard = index === stats.length - 1;
+        const isFirstCard = index === 0;
+        const valueColor = isLastCard && stat.value === "--" ? "text-green-500" : "text-text-primary dark:text-white";
+
+        return (
+          <Card
+            key={index}
+            className={`flex-1 rounded-[2rem] h-full relative overflow-hidden group bg-bg-subtle dark:bg-gray-800 border border-border-gray dark:border-gray-700 shadow-[0_8px_32px_rgba(0,0,0,0.03)] transition-all duration-500 hover:shadow-[0_16px_48px_rgba(0,0,0,0.06)]
+              ${index === 0 ? 'bg-gradient-to-br from-blue-50/80 to-transparent dark:from-blue-900/20 dark:to-transparent' : ''}
+              ${index === 1 ? 'bg-gradient-to-br from-green-50/80 to-transparent dark:from-green-900/20 dark:to-transparent' : ''}
+              ${index === 2 ? 'bg-gradient-to-br from-purple-50/80 to-transparent dark:from-purple-900/20 dark:to-transparent' : ''}
+            `}
+          >
+            <CardBody className="p-7 flex flex-col gap-3">
+              {/* Header with label and change badge */}
+              <div className={`flex flex-row gap-2 items-center ${index === 1 || index === 2 || index === 3 ? 'justify-between' : 'justify-start'} self-stretch`}>
+                <div className="text-text-tertiary dark:text-gray-400 text-[10px] font-bold leading-[150%] tracking-[0.01em] font-inter">
+                  {stat.label}
+                </div>
+                <div
+                  className={`bg-green-50 dark:bg-green-900/30 rounded-full px-1 py-0.5 flex flex-row gap-0 items-center justify-start h-5 ${
+                    isFirstCard ? 'opacity-0' : 'opacity-100'
+                  }`}
+                >
+                  <Image
+                    src="/stats-icon.svg"
+                    alt=""
+                    width={12}
+                    height={12}
+                    className="flex-shrink-0"
+                  />
+                  <div className="text-green-500 dark:text-green-400 text-[10px] font-bold leading-[150%] tracking-[0.01em] font-inter">
+                    {stat.change}
+                  </div>
+                </div>
+              </div>
+
+              {/* Value */}
+              <div className="flex flex-row gap-4 items-end justify-start">
+                <div className={`${valueColor} text-heading-h2 font-extrabold font-jetbrains`}>
+                  {stat.value}
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}