大更新

components/points/ReferralCodeCard.tsx

@@ -0,0 +1,64 @@
+import Image from "next/image";
+import { Button } from "@heroui/react";
+import BorderedButton from "@/components/common/BorderedButton";
+
+interface ReferralCodeCardProps {
+  code: string;
+  onCopy?: () => void;
+  onShare?: () => void;
+}
+
+export default function ReferralCodeCard({
+  code = "PR0T0-8821",
+  onCopy,
+  onShare,
+}: ReferralCodeCardProps) {
+  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">
+      {/* Header */}
+      <div className="flex items-center gap-3 h-6">
+        <Image src="/icon0.svg" alt="" width={24} height={24} />
+        <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
+          REFERRAL CODE
+        </span>
+      </div>
+
+      {/* Description */}
+      <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+        Share your unique code to earn 10% commission on all friend activities.
+      </p>
+
+      {/* Code Display and Buttons */}
+      <div className="flex flex-col gap-4">
+        {/* Code Display Row */}
+        <div className="flex items-center gap-2">
+          {/* Code Container */}
+          <div className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-3 h-[46px] flex items-center">
+            <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%] font-jetbrains">
+              {code}
+            </span>
+          </div>
+
+          {/* Copy Button */}
+          <Button
+            isIconOnly
+            onClick={onCopy}
+            className="bg-text-primary dark:bg-white rounded-xl w-[46px] h-[46px] min-w-[46px]"
+          >
+            <Image src="/icon1.svg" alt="Copy" width={20} height={20} />
+          </Button>
+        </div>
+
+        {/* Share Button */}
+        <BorderedButton
+          size="lg"
+          fullWidth
+          onClick={onShare}
+          isTheme
+        >
+          Share
+        </BorderedButton>
+      </div>
+    </div>
+  );
+}