components/ui/Chip.tsx

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

type ChipProps = {
  label?: string;
  value?: string;
  color?: 'gray' | 'blue' | 'yellow' | 'purple';
  className?: string;
} & React.ComponentProps<'div'>;

const Chip: React.FC<ChipProps> = ({
  value,
  className,
  color = 'gray',
  children,
}) => {
  return (
    <div
      className={cn(
        'inline-flex items-center rounded-full text-xs mr-2 bg-gray-100 text-gray-500 px-2 py-0.5',
        `bg-${color}-100 text-${color}-500`,
        className,
      )}
    >
      <span>{value}</span>
      {children}
    </div>
  );
};

export default Chip;