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

import * as React from 'react';
import { tailwind } from '@tesseract-design/web-base';

const { tw } = tailwind;

const BadgeDerivedElementComponent = 'span' as const;

/**
 * Derived HTML element of the {@link Badge} component.
 */
export type BadgeDerivedElement = HTMLElementTagNameMap[
  typeof BadgeDerivedElementComponent
];

/**
 * Props of the {@link Badge} component.
 */
export interface BadgeProps extends React.HTMLProps<BadgeDerivedElement> {
  /**
   * Is the component rounded?
   */
  rounded?: boolean;
}

/**
 * Component for displaying textual information in a small container.
 */
export const Badge = React.forwardRef<BadgeDerivedElement, BadgeProps>((
  {
    children,
    rounded = false,
    className,
    style,
    ...etcProps
  },
  forwardedRef,
) => (
  <BadgeDerivedElementComponent
    {...etcProps}
    ref={forwardedRef}
    className={tw(
      'relative h-6 min-w-6 inline-flex align-middle 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,
    )}
    style={style}
    data-testid="badge"
  >
    <span className="relative w-full">
      {children}
    </span>
  </BadgeDerivedElementComponent>
));

Badge.displayName = 'Badge';

Badge.defaultProps = {
  rounded: false,
};