text: import React from 'react'
  import PropTypes from 'prop-types'
  import About from './About'
  import Contact from './Contact'
  import Media from './Media'
  import Music from './Music'
  
  class Main extends React.Component {
    render() {
      let close = (
        <div
          className="close"
          onClick={() => {
            this.props.onCloseArticle()
          }}
        />
      )
  
      return (
        <div
          ref={this.props.setWrapperRef}
          id="main"
          style={this.props.timeout ? { display: 'flex' } : { display: 'none' }}
        >
          <article
            id="music"
            className={`${this.props.article === 'music' ? 'active' : ''} ${
              this.props.articleTimeout ? 'timeout' : ''
            }`}
            style={{ display: 'none' }}
          >
            <Music />
  
            {close}
          </article>
  
          <article
            id="media"
            className={`${this.props.article === 'media' ? 'active' : ''} ${
              this.props.articleTimeout ? 'timeout' : ''
            }`}
            style={{ display: 'none' }}
          >
            <Media />
            {close}
          </article>
  
          <article
            id="about"
            className={`${this.props.article === 'about' ? 'active' : ''} ${
              this.props.articleTimeout ? 'timeout' : ''
            } aboutSection`}
            style={{ display: 'none' }}
          >
            <About />
            {close}
          </article>
  
          <article
            id="contact"
            className={`${this.props.article === 'contact' ? 'active' : ''} ${
              this.props.articleTimeout ? 'timeout' : ''
            }`}
            style={{ display: 'none' }}
          >
            <Contact />
            {close}
          </article>
        </div>
      )
    }
  }
  
  Main.propTypes = {
    route: PropTypes.object,
    article: PropTypes.string,
    articleTimeout: PropTypes.bool,
    onCloseArticle: PropTypes.func,
    timeout: PropTypes.bool,
    setWrapperRef: PropTypes.func.isRequired,
  }
  
  export default Main
  