shlinkio / shlink-web-client

import React from 'react';

import { Card } from 'reactstrap';

import classNames from 'classnames';

import PropTypes from 'prop-types';

import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const propTypes = {

  noMargin: PropTypes.bool,

  loading: PropTypes.bool,

  children: PropTypes.node,

};

const MutedMessage = ({ children, loading = false, noMargin = false }) => {

  const cardClasses = classNames('bg-light', {

    'mt-4': !noMargin,

  });

  return (

    <div className="col-md-10 offset-md-1">

      <Card className={cardClasses} body>

        <h3 className="text-center text-muted mb-0">

          {loading && <FontAwesomeIcon icon={preloader} spin />}

          {loading && !children && <span className="ml-2">Loading...</span>}

          {children}

        </h3>

      </Card>

    </div>

  );

};

MutedMessage.propTypes = propTypes;

export default MutedMessage;