45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
|
import { ReactNode } from 'react';
|
||
|
|
|
||
|
|
interface BadgeProps {
|
||
|
|
children: ReactNode;
|
||
|
|
variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'glass';
|
||
|
|
size?: 'sm' | 'md' | 'lg';
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Badge({
|
||
|
|
children,
|
||
|
|
variant = 'default',
|
||
|
|
size = 'md',
|
||
|
|
className = ''
|
||
|
|
}: BadgeProps) {
|
||
|
|
const baseClasses = "inline-flex items-center font-medium rounded-full transition-all duration-300 ease-out";
|
||
|
|
|
||
|
|
const sizeClasses = {
|
||
|
|
sm: "px-2 py-1 text-xs",
|
||
|
|
md: "px-3 py-1.5 text-sm",
|
||
|
|
lg: "px-4 py-2 text-base"
|
||
|
|
};
|
||
|
|
|
||
|
|
const variantClasses = {
|
||
|
|
default: "bg-gray-700/50 text-gray-300 border border-gray-600/50",
|
||
|
|
success: "bg-green-500/20 text-green-400 border border-green-500/30",
|
||
|
|
warning: "bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
|
||
|
|
error: "bg-red-500/20 text-red-400 border border-red-500/30",
|
||
|
|
info: "bg-blue-500/20 text-blue-400 border border-blue-500/30",
|
||
|
|
glass: "bg-white/10 text-white border border-white/20 backdrop-blur-sm"
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
|
||
|
|
style={{
|
||
|
|
transform: 'translateZ(0)',
|
||
|
|
willChange: 'transform'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|