content: import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  
  import styles from './styles.css';
  
  import Avatar from '@ciscospark/react-component-avatar';
  
  export default function TitleBar({children, image, name}) {
    return (
      <div className={classNames(`ciscospark-title-bar`, styles.titleBar)}>
        <div className={classNames(`ciscospark-avatar-container`, styles.avatarContainer)}>
          <Avatar image={image} name={name} size={`large`} />
        </div>
        <div className={classNames(`ciscospark-title-text`, styles.titleText)}>
          <h1 className={classNames(`ciscospark-title`, styles.title)}>{name}</h1>
        </div>
        <div className={classNames(`ciscospark-title-meta`, styles.titleMeta)}>
          {children}
        </div>
      </div>
    );
  }
  
  TitleBar.propTypes = {
    children: PropTypes.node,
    image: PropTypes.string,
    name: PropTypes.string
  };
  