dyolink/frontend/src/components/ui/common/Badge.tsx

//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-emerald-900/30 text-emerald-300 border-emerald-700/60',
    warning: 'bg-amber-900/30 text-amber-300 border-amber-700/60',
    danger: 'bg-red-950/30 text-red-300 border-red-700/60',
    default: 'bg-background-secondary text-text-secondary border-border',
};

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>
    );
}