Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './tag.module.css';
       3              : 
       4              : import { classNames } from '../../utils/classnames.js';
       5              : 
       6              : /// The look of a tag
       7            1 : export enum TagVariant {
       8              :     /// A light fill with a hairline border, for tags on light surfaces
       9            1 :     Muted,
      10              :     /// A transparent background with a hairline border
      11            1 :     Outline,
      12            1 : }
      13              : 
      14              : interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
      15              :     /// The look of the tag
      16              :     variant?: TagVariant;
      17              : }
      18              : 
      19              : /// A small tag that labels something, e.g. the protocol of a connection.
      20              : /// The text keeps its casing, callers transform it if they need to.
      21            1 : export function Tag(props: TagProps): React.ReactElement {
      22            1 :     const { variant = TagVariant.Muted, className, ...rest } = props;
      23            1 :     return (
      24            1 :         <span
      25            1 :             {...rest}
      26            1 :             className={classNames(styles.tag, variant === TagVariant.Outline ? styles.outline : styles.muted, className)}
      27            1 :         />
      28              :     );
      29            1 : }