root
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Crown, Sparkles } from "lucide-react";
|
|
|
|
interface PremiumBadgeProps {
|
|
tier: "premium" | "pro" | "free";
|
|
size?: "sm" | "md" | "lg";
|
|
}
|
|
|
|
export default function PremiumBadge({ tier, size = "sm" }: PremiumBadgeProps) {
|
|
const sizeMap = {
|
|
sm: { px: "px-1.5 py-0.5", text: "text-[9px]", icon: 8, gap: "gap-0.5" },
|
|
md: { px: "px-2 py-0.5", text: "text-[10px]", icon: 10, gap: "gap-1" },
|
|
lg: { px: "px-2.5 py-1", text: "text-xs", icon: 12, gap: "gap-1" },
|
|
};
|
|
|
|
const s = sizeMap[size];
|
|
|
|
if (tier === "premium") {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gradient-to-r from-[#D4AF37]/20 to-yellow-900/20 border border-[#D4AF37]/50 ${s.text} font-semibold text-[#D4AF37] shadow-[0_0_6px_rgba(212,175,55,0.3)]`}
|
|
>
|
|
<Crown size={s.icon} className="text-[#D4AF37]" />
|
|
Premium
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (tier === "pro") {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gradient-to-r from-purple-900/30 to-violet-900/20 border border-purple-500/50 ${s.text} font-semibold text-purple-300 shadow-[0_0_8px_rgba(168,85,247,0.35)]`}
|
|
>
|
|
<Crown size={s.icon} className="text-purple-400" />
|
|
Pro
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// Free tier
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gray-800/40 border border-gray-700/50 ${s.text} font-medium text-gray-500`}
|
|
>
|
|
<Sparkles size={s.icon} className="text-gray-600" />
|
|
Free
|
|
</span>
|
|
);
|
|
}
|