26 lines
1.0 KiB
TypeScript
26 lines
1.0 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface BadgeProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
}
|
|
|
|
export function Badge({ children, className = '', variant = 'default' }: BadgeProps) {
|
|
const baseClasses = 'flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium';
|
|
|
|
const variantClasses = {
|
|
default: 'bg-gray-500/10 border-gray-500/30 text-gray-400',
|
|
primary: 'bg-primary-blue/10 border-primary-blue/30 text-primary-blue',
|
|
success: 'bg-performance-green/10 border-performance-green/30 text-performance-green',
|
|
warning: 'bg-warning-amber/10 border-warning-amber/30 text-warning-amber',
|
|
danger: 'bg-red-600/10 border-red-600/30 text-red-500',
|
|
info: 'bg-neon-aqua/10 border-neon-aqua/30 text-neon-aqua'
|
|
};
|
|
|
|
const classes = [baseClasses, variantClasses[variant], className].filter(Boolean).join(' ');
|
|
|
|
return <Box className={classes}>{children}</Box>;
|
|
}
|