99 lines
3.7 KiB
TypeScript
99 lines
3.7 KiB
TypeScript
import Image from "next/image";
|
|
|
|
interface RoleIndicator {
|
|
icon: string;
|
|
label: string;
|
|
current: number;
|
|
total: number;
|
|
}
|
|
|
|
interface TeamTVLCardProps {
|
|
currentTVL: string;
|
|
totalTVL: string;
|
|
progressPercent: number;
|
|
members: number;
|
|
roles: RoleIndicator[];
|
|
}
|
|
|
|
export default function TeamTVLCard({
|
|
currentTVL = "$8.5M",
|
|
totalTVL = "$10M",
|
|
progressPercent = 85,
|
|
members = 12,
|
|
roles = [
|
|
{ icon: "/icon-whale.svg", label: "Whales", current: 3, total: 3 },
|
|
{ icon: "/icon-trader.svg", label: "Traders", current: 0, total: 3 },
|
|
{ icon: "/icon-user.svg", label: "Users", current: 5, total: 3 },
|
|
],
|
|
}: TeamTVLCardProps) {
|
|
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 relative">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<Image src="/icon0.svg" alt="" width={24} height={24} />
|
|
<span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
|
|
Team TVL Reward
|
|
</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>
|
|
|
|
{/* Progress Section */}
|
|
<div className="flex flex-col gap-4">
|
|
{/* TVL Info */}
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-start justify-between">
|
|
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
CURRENT TEAM TVL
|
|
</span>
|
|
<span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
|
|
{currentTVL} / {totalTVL}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="relative w-full h-2 bg-[#f3f4f6] dark:bg-gray-700 rounded-full overflow-hidden">
|
|
<div
|
|
className="absolute left-0 top-0 h-full rounded-full"
|
|
style={{
|
|
width: `${progressPercent}%`,
|
|
background: "linear-gradient(90deg, rgba(20, 71, 230, 1) 0%, rgba(3, 43, 189, 1) 100%)"
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Role Indicators */}
|
|
<div className="flex items-center gap-2">
|
|
{roles.map((role, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-xl border border-border-gray dark:border-gray-600 px-4 py-2 flex flex-col items-center justify-center gap-0"
|
|
>
|
|
<div className="flex items-center justify-center h-4">
|
|
<Image src={role.icon} alt={role.label} width={16} height={16} />
|
|
</div>
|
|
<span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
{role.label}
|
|
</span>
|
|
<span className="text-caption-tiny font-bold text-text-primary dark:text-white leading-[150%] tracking-[0.01em]">
|
|
{role.current}/{role.total}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Members Badge */}
|
|
<div className="absolute right-6 top-8 bg-[#e1f8ec] dark:bg-green-900/30 border border-[#b8ecd2] dark:border-green-700 rounded-full px-3 py-1">
|
|
<span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
|
|
{members} Members
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|