components/ui/Chip.tsx

import { cn } from '@/lib/utils';

export interface ChipProps {
  label?: string;
  value: string;
  color?: 'gray' | 'blue';
  className?: string;
}

const Chip: React.FC<ChipProps> = ({
  label,
  value,
  color = 'gray',
  className,
}) => {
  return (
    <div
      className={cn(
        `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${color}-100 text-${color}-800 mr-1`,
        className,
      )}
    >
      {label && <span className="font-medium">{label} :</span>}
      <span>{value}</span>
    </div>
  );
};

export default Chip;