saagie-ui/src/react/core/layout/pageHeader/PageHeader.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../atoms/icon/Icon';

const propTypes = {
  badge: PropTypes.node,
  children: PropTypes.node,
  icon: PropTypes.string,
  isIconColored: PropTypes.bool,
  title: PropTypes.node,
};

const defaultProps = {
  badge: null,
  children: null,
  icon: '',
  isIconColored: false,
  title: '',
};

export const PageHeader = ({
  badge,
  children,
  icon,
  isIconColored,
  title,
}) => (
  <div className="sui-l-page-header">
    <div className="sui-l-page-header__primary">
      <div className="sui-l-page-header__title">
        { icon ? (
          <div className="sui-l-page-header__title-icon">
            <Icon name={icon} className={isIconColored ? 'as--svg-color' : ''} />
          </div>
        ) : '' }
        <div className="sui-l-page-header__title-text">
          { title }
        </div>
        { (badge || badge === 0) && (
          <div className="sui-l-page-header__title-extra">
            <span className="sui-a-badge">
              { badge }
            </span>
          </div>
        ) }
      </div>
    </div>
    { !!children && (
      <div className="sui-l-page-header__secondary">
        { children }
      </div>
    )}
  </div>
);

PageHeader.propTypes = propTypes;
PageHeader.defaultProps = defaultProps;