27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface BadgeProps {
|
|
children: React.ReactNode;
|
|
variant?: 'success' | 'warning' | 'danger' | 'info' | 'secondary';
|
|
className?: string;
|
|
}
|
|
|
|
const variants = {
|
|
success: 'bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 border border-green-200/50 shadow-sm',
|
|
warning: 'bg-gradient-to-r from-amber-100 to-yellow-100 text-amber-800 border border-amber-200/50 shadow-sm',
|
|
danger: 'bg-gradient-to-r from-red-100 to-rose-100 text-red-800 border border-red-200/50 shadow-sm',
|
|
info: 'bg-gradient-to-r from-red-50 to-red-100 text-red-700 border border-red-200/50 shadow-sm',
|
|
secondary: 'bg-gradient-to-r from-gray-100 to-slate-100 text-gray-800 border border-gray-200/50 shadow-sm',
|
|
};
|
|
|
|
export const Badge: React.FC<BadgeProps> = ({
|
|
children,
|
|
variant = 'secondary',
|
|
className = ''
|
|
}) => {
|
|
return (
|
|
<span className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold backdrop-blur-sm transition-all duration-200 hover:scale-105 ${variants[variant]} ${className}`}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}; |