大更新

2026-02-04 12:56:06 +08:00
parent 098a91f2ac
commit 4f2ff3f3ba
535 changed files with 11908 additions and 15540 deletions
--- a/components/points/EarnOpportunityCard.tsx
+++ b/components/points/EarnOpportunityCard.tsx
@@ -0,0 +1,86 @@
+import { Button } from "@heroui/react";
+import BorderedButton from "@/components/common/BorderedButton";
+
+interface EarnOpportunityCardProps {
+  pointsLabel: string;
+  title: string;
+  subtitle: string;
+  metricLabel: string;
+  metricValue: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+}
+
+export default function EarnOpportunityCard({
+  pointsLabel,
+  title,
+  subtitle,
+  metricLabel,
+  metricValue,
+  buttonText,
+  onButtonClick,
+}: EarnOpportunityCardProps) {
+  return (
+    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
+      {/* Top Section - Logo and Points Badge */}
+      <div className="flex items-start justify-between">
+        {/* Logo */}
+        <div
+          className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
+          style={{
+            background: "linear-gradient(135deg, rgba(0, 187, 167, 1) 0%, rgba(0, 122, 85, 1) 100%)"
+          }}
+        >
+          <span className="text-[10px] font-bold text-white leading-[125%] tracking-[-0.11px]">
+            LOGO
+          </span>
+        </div>
+
+        {/* Points Badge */}
+        <div
+          className="rounded-full px-3 py-1 flex items-center justify-center"
+          style={{
+            background: "#fff5ef",
+            border: "1px solid #ffc9ad"
+          }}
+        >
+          <span className="text-[10px] font-bold leading-[150%] tracking-[0.01em]" style={{ color: "#ff6900" }}>
+            {pointsLabel}
+          </span>
+        </div>
+      </div>
+
+      {/* Middle Section - Title and Subtitle */}
+      <div className="flex flex-col gap-1">
+        <h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
+          {title}
+        </h3>
+        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {subtitle}
+        </p>
+      </div>
+
+      {/* Bottom Section - Metric and Button */}
+      <div className="flex items-center gap-6">
+        {/* Metric */}
+        <div className="flex-1 flex flex-col gap-1">
+          <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {metricLabel}
+          </span>
+          <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+            {metricValue}
+          </span>
+        </div>
+
+        {/* Button */}
+        <BorderedButton
+          size="lg"
+          onClick={onButtonClick}
+          className="bg-[#f3f4f6] dark:bg-gray-700 text-text-primary dark:text-white"
+        >
+          {buttonText}
+        </BorderedButton>
+      </div>
+    </div>
+  );
+}