50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Shield } from 'lucide-react';
|
|
|
|
interface StatusBadgeProps {
|
|
badge: 'none' | 'silver' | 'gold' | 'platinium';
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
const BADGE_CONFIG = {
|
|
none: null,
|
|
silver: {
|
|
label: 'Silver',
|
|
bg: 'bg-slate-100',
|
|
text: 'text-slate-700',
|
|
icon: 'text-slate-500',
|
|
},
|
|
gold: {
|
|
label: 'Gold',
|
|
bg: 'bg-yellow-100',
|
|
text: 'text-yellow-800',
|
|
icon: 'text-yellow-600',
|
|
},
|
|
platinium: {
|
|
label: 'Platinium',
|
|
bg: 'bg-purple-100',
|
|
text: 'text-purple-800',
|
|
icon: 'text-purple-600',
|
|
},
|
|
};
|
|
|
|
export default function StatusBadge({ badge, size = 'sm' }: StatusBadgeProps) {
|
|
const config = BADGE_CONFIG[badge];
|
|
if (!config) return null;
|
|
|
|
const sizeClasses = size === 'sm'
|
|
? 'text-xs px-2 py-0.5 gap-1'
|
|
: 'text-sm px-3 py-1 gap-1.5';
|
|
|
|
const iconSize = size === 'sm' ? 'w-3 h-3' : 'w-4 h-4';
|
|
|
|
return (
|
|
<span className={`inline-flex items-center font-medium rounded-full ${config.bg} ${config.text} ${sizeClasses}`}>
|
|
<Shield className={`${iconSize} ${config.icon}`} />
|
|
{config.label}
|
|
</span>
|
|
);
|
|
}
|