Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './connection_label_view.module.css';
       3              : 
       4              : import type { ConnectionLabelParts } from './connection_label.js';
       5              : import { Tag } from '../ui/foundations/tag.js';
       6              : import { classNames } from '../utils/classnames.js';
       7              : 
       8              : /// The label of a connection, the protocol is a small muted tag.
       9              : /// The label fills its row and the tag sits at the right end, an inline label puts the tag right
      10              : /// after the name, e.g. in a title.
      11            1 : export function ConnectionLabelView(props: { parts: ConnectionLabelParts, inline?: boolean }): React.ReactElement {
      12            1 :     const { name, detail } = props.parts;
      13            1 :     return (
      14            1 :         <span className={classNames(styles.label, props.inline && styles.inline)}>
      15            1 :             <span className={styles.name}>{name}</span> <ConnectionProtocolTag detail={detail} />
      16            1 :         </span>
      17              :     );
      18            1 : }
      19              : 
      20              : /// The protocol of a connection as a tag, e.g. "wasm"
      21            1 : export function ConnectionProtocolTag(props: { detail: string }): React.ReactElement {
      22            1 :     return <Tag className={styles.detail}>{props.detail}</Tag>;
      23            1 : }