31 lines
836 B
TypeScript
31 lines
836 B
TypeScript
|
//src/components/ui/Badge.tsx
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
type BadgeVariant = 'success' | 'warning' | 'danger' | 'default';
|
||
|
|
|
||
|
|
interface BadgeProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
variant?: BadgeVariant;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const variantStyles: Record<BadgeVariant, string> = {
|
||
|
|
success: 'bg-green-50 text-green-700 border-green-200',
|
||
|
|
warning: 'bg-yellow-50 text-yellow-700 border-yellow-200',
|
||
|
|
danger: 'bg-red-50 text-red-700 border-red-200',
|
||
|
|
default: 'bg-gray-50 text-gray-700 border-gray-200',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Badge({
|
||
|
|
children,
|
||
|
|
variant = 'default',
|
||
|
|
className,
|
||
|
|
}: BadgeProps) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={`px-2 py-1 text-xs font-medium rounded-lg border inline-block ${variantStyles[variant]} ${className || ''}`}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|