You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
751 B
30 lines
751 B
import React from 'react';
|
|
|
|
interface BadgeProps {
|
|
badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
|
|
}
|
|
|
|
const Badge: React.FC<BadgeProps> = ({ badgeType = 'default', children }) => {
|
|
const badgeStyle = [
|
|
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
|
|
];
|
|
|
|
switch (badgeType) {
|
|
case 'danger':
|
|
badgeStyle.push('bg-red-600 text-red-100');
|
|
break;
|
|
case 'warning':
|
|
badgeStyle.push('bg-yellow-500 text-yellow-100');
|
|
break;
|
|
case 'success':
|
|
badgeStyle.push('bg-green-400 text-green-100');
|
|
break;
|
|
default:
|
|
badgeStyle.push('bg-indigo-500 text-indigo-100');
|
|
}
|
|
|
|
return <span className={badgeStyle.join(' ')}>{children}</span>;
|
|
};
|
|
|
|
export default Badge;
|