lti-web-client/src/components/PillBadge.tsx

import { ReactNode } from 'react';
import { cn } from '@/lib/helper';

interface PillBadgeProps {
  content: ReactNode;
  color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
  className?: string;
}

const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
  return (
    <div
      className={cn(
        'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
        {
          'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
          'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
          'border-green-200 bg-green-50 text-green-500': color === 'green',
          'border-red-200 bg-red-50 text-red-500': color === 'red',
          'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
          'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
        },
        className
      )}
    >
      {content}
    </div>
  );
};

export default PillBadge;