initial commit

2026-02-04 13:39:12 +08:00
commit 199940e958
175 changed files with 19963 additions and 0 deletions
--- a/components/points/TopPerformers.tsx
+++ b/components/points/TopPerformers.tsx
@@ -0,0 +1,129 @@
+import Image from "next/image";
+
+interface Performer {
+  rank: number;
+  address: string;
+  points: string;
+}
+
+const mockPerformers: Performer[] = [
+  { rank: 1, address: "0x8A...2291", points: "52k" },
+  { rank: 2, address: "0x11...F92A", points: "48k" },
+  { rank: 3, address: "0x9C...3310", points: "41k" },
+  { rank: 4, address: "0x42...119A", points: "32k" },
+  { rank: 5, address: "0x77...882B", points: "28k" },
+];
+
+export default function TopPerformers() {
+  const getRowStyle = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return {
+          bg: "#fff5ef",
+          borderColor: "#ff6900",
+          rankColor: "#ff6900",
+          textColor: "#111827",
+          pointsSize: "text-body-large",
+        };
+      case 2:
+        return {
+          bg: "#fffbf5",
+          borderColor: "#ffb933",
+          rankColor: "#ffb933",
+          textColor: "#111827",
+          pointsSize: "text-body-large",
+        };
+      case 3:
+        return {
+          bg: "#f3f4f6",
+          borderColor: "#6b7280",
+          rankColor: "#6b7280",
+          textColor: "#111827",
+          pointsSize: "text-body-large",
+        };
+      default:
+        return {
+          bg: "transparent",
+          borderColor: "transparent",
+          rankColor: "#d1d5db",
+          textColor: "#9ca1af",
+          pointsSize: "text-body-small",
+        };
+    }
+  };
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col overflow-hidden h-full">
+      {/* Header */}
+      <div className="border-b border-[#f1f5f9] dark:border-gray-700 px-6 pt-8 pb-8">
+        <h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
+          Top Performers
+        </h3>
+      </div>
+
+      {/* Performers List */}
+      <div className="flex-1 flex flex-col">
+        {mockPerformers.map((performer) => {
+          const style = getRowStyle(performer.rank);
+          const isTopThree = performer.rank <= 3;
+          const height = performer.rank <= 3 ? "h-[72px]" : "h-[68px]";
+
+          return (
+            <div
+              key={performer.rank}
+              className={`flex items-center justify-between px-6 ${height} border-l-4`}
+              style={{
+                backgroundColor: style.bg,
+                borderLeftColor: style.borderColor,
+              }}
+            >
+              {/* Left - Rank and Address */}
+              <div className="flex items-center gap-5">
+                {/* Rank Number */}
+                <span
+                  className={`font-black italic leading-[133%] ${
+                    isTopThree ? "text-2xl tracking-[0.07px]" : "text-lg tracking-[-0.44px]"
+                  }`}
+                  style={{ color: style.rankColor }}
+                >
+                  {performer.rank}
+                </span>
+
+                {/* Address */}
+                <span
+                  className="text-body-small font-bold font-jetbrains leading-[150%]"
+                  style={{ color: style.textColor }}
+                >
+                  {performer.address}
+                </span>
+              </div>
+
+              {/* Right - Points */}
+              <span
+                className={`${style.pointsSize} font-bold leading-[150%]`}
+                style={{
+                  color: isTopThree ? "#111827" : "#4b5563",
+                }}
+              >
+                {performer.points}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer - My Rank */}
+      <div className="border-t border-border-gray dark:border-gray-700 px-6 py-6 flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <Image src="/icon-chart.svg" alt="Chart" width={16} height={16} />
+          <span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            MY RANK
+          </span>
+        </div>
+        <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+          2,450.00
+        </span>
+      </div>
+    </div>
+  );
+}