65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|