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;