50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
|
import Image from "next/image";
|
||
|
|
import { Button } from "@heroui/react";
|
||
|
|
|
||
|
|
interface BindInviteCardProps {
|
||
|
|
placeholder?: string;
|
||
|
|
onApply?: (code: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function BindInviteCard({
|
||
|
|
placeholder = "ENTER CODE",
|
||
|
|
onApply,
|
||
|
|
}: BindInviteCardProps) {
|
||
|
|
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%]">
|
||
|
|
BIND INVITE
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Description */}
|
||
|
|
<p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
Were you invited? Enter the code here to boost your base yield by +0.5%.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Input and Button */}
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
{/* Input Field */}
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<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-[#d1d5db] dark:text-gray-500 leading-[150%] font-jetbrains">
|
||
|
|
{placeholder}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Apply Button */}
|
||
|
|
<Button
|
||
|
|
onClick={() => onApply?.("")}
|
||
|
|
className="bg-text-primary dark:bg-white rounded-xl h-11 text-body-small font-bold text-white dark:text-gray-900"
|
||
|
|
>
|
||
|
|
Apply
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|