110 lines
4.5 KiB
TypeScript
110 lines
4.5 KiB
TypeScript
import Image from "next/image";
|
|
|
|
interface VipCardProps {
|
|
memberTier: string;
|
|
level: number;
|
|
currentPoints: number;
|
|
totalPoints: number;
|
|
nextTier: string;
|
|
pointsToNextTier: number;
|
|
}
|
|
|
|
export default function VipCard({
|
|
memberTier = "Silver Member",
|
|
level = 2,
|
|
currentPoints = 2450,
|
|
totalPoints = 3000,
|
|
nextTier = "Gold",
|
|
pointsToNextTier = 550,
|
|
}: VipCardProps) {
|
|
const progressPercent = (currentPoints / totalPoints) * 100;
|
|
const progressBarPercent = Math.min(progressPercent * 0.47, 38.4); // 根据原型调整比例
|
|
|
|
return (
|
|
<div className="w-[340px] h-[198px] relative rounded-xl overflow-hidden" style={{ background: "linear-gradient(180deg, #484848 0%, #1e1e1e 100%)" }}>
|
|
{/* Top Left - Member Info */}
|
|
<div className="absolute left-6 top-[33px]">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-body-default font-bold text-white leading-[150%]">
|
|
{memberTier}
|
|
</span>
|
|
<span className="text-body-small font-bold text-text-tertiary dark:text-gray-400 leading-[150%]">
|
|
Current Tier
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Right - VIP Badge */}
|
|
<div className="absolute right-6 top-[26px]">
|
|
<div className="relative w-[55px] h-[28px]">
|
|
{/* Badge Layers */}
|
|
<div className="absolute left-[0.45px] top-[6px]">
|
|
<Image src="/polygon-30.svg" alt="" width={24} height={15} />
|
|
</div>
|
|
<div className="absolute left-[28.55px] top-[6px]">
|
|
<Image src="/polygon-40.svg" alt="" width={24} height={15} />
|
|
</div>
|
|
<div className="absolute left-[4px] top-[3px]">
|
|
<Image src="/polygon-20.svg" alt="" width={21} height={25} />
|
|
</div>
|
|
<div className="absolute left-[4px] top-[3px]">
|
|
<Image src="/mask-group1.svg" alt="" width={21} height={25} />
|
|
</div>
|
|
|
|
{/* Decorative circles */}
|
|
<div className="absolute left-[12.84px] top-0 w-[3.32px] h-[3.32px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
|
|
<div className="absolute left-0 top-[5.14px] w-[2.72px] h-[2.72px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
|
|
<div className="absolute left-[26.2px] top-[5.14px] w-[2.72px] h-[2.72px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
|
|
|
|
{/* Level Badge */}
|
|
<div className="absolute left-[24px] top-[9.62px]">
|
|
<Image src="/rectangle-420.svg" alt="" width={31} height={12} />
|
|
<span className="absolute left-[9.24px] top-0 text-[8.5px] font-semibold leading-[120%] uppercase" style={{ color: "#a07400" }}>
|
|
LV{level}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom - Progress Section */}
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-[107px] w-[280px] flex flex-col gap-1">
|
|
{/* Progress Label */}
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-caption-tiny font-regular leading-[150%] tracking-[0.01em]" style={{ color: "#d1d5db" }}>
|
|
Progress
|
|
</span>
|
|
<span className="text-caption-tiny font-bold text-white leading-[150%] tracking-[0.01em]">
|
|
{currentPoints} / {totalPoints}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="relative w-full h-1 rounded-[5px]" style={{ background: "#343434" }}>
|
|
<div
|
|
className="absolute left-0 top-0 h-full rounded-[5px]"
|
|
style={{
|
|
width: `${progressBarPercent}%`,
|
|
background: "linear-gradient(90deg, rgba(255, 255, 255, 1) 95.15%, rgba(255, 255, 255, 0) 100%)"
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute w-[10px] h-[10px] rounded-full bg-white -top-[3px]"
|
|
style={{
|
|
left: `${Math.max(0, progressBarPercent - 3)}%`,
|
|
filter: "blur(3.42px)"
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom - Next Tier */}
|
|
<div className="absolute left-6 top-[163px] flex items-center gap-1">
|
|
<span className="text-caption-tiny font-regular text-white leading-[150%] tracking-[0.01em]">
|
|
{pointsToNextTier} points to <span className="font-bold">{nextTier}</span>
|
|
</span>
|
|
<Image src="/icon-arrow-gold.svg" alt="" width={16} height={16} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|