@arizeai/phoenix-mcp

import { PropsWithChildren } from "react";
import { css } from "@emotion/react";

export type CounterProps = PropsWithChildren<{
  /**
   * The color of the counter
   * @default 'default'
   **/
  variant?: "default" | "danger";
}>;

const counterCSS = css`
  display: inline-block;
  padding: 0 var(--ac-global-dimension-size-50);
  border-radius: var(--ac-global-rounding-large);
  border: 1px solid var(--ac-global-color-grey-300);
  min-width: var(--ac-global-dimension-size-150);
  background-color: var(--ac-global-background-color-light);
  font-size: var(--ac-global-font-size-xs);
  line-height: var(--ac-global-line-height-xs);
  text-align: center;
  color: var(--ac-global-text-color-900);
  &[data-variant="danger"] {
    background-color: var(--ac-global-background-color-danger);
  }
`;

/**
 * A component to show the count of something (e.x. in a tab)
 */
export function Counter(props: CounterProps) {
  const { children, variant = "default" } = props;
  return (
    <span css={counterCSS} data-variant={variant} className="ac-counter">
      {children}
    </span>
  );
}