tesseract/categories/information/react/src/components/Badge/index.tsx

import * as React from 'react';
import clsx from 'clsx';

export type BadgeDerivedElement = HTMLSpanElement;

export interface BadgeProps extends React.HTMLProps<BadgeDerivedElement> {
  rounded?: boolean;
}

export const Badge = React.forwardRef<BadgeDerivedElement, BadgeProps>(({
  children,
  rounded = false,
  className,
  ...etcProps
}, forwardedRef) => (
  <span
    {...etcProps}
    ref={forwardedRef}
    className={clsx(
      'relative h-6 min-w-6 flex items-center justify-center text-xs font-bold overflow-hidden font-semi-expanded',
      'before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-current before:opacity-25',
      {
        'rounded-full px-2': rounded,
        'rounded px-1': !rounded,
      },
      className,
    )}
  >
      <span className="relative w-full">
        {children}
      </span>
    </span>
));

Badge.displayName = 'Badge';