gistfile1.txt

// @flow
'use strict';

import React, { Component } from 'react';
import './Box1.styl';
import MenuInfo from '../../data/menu.js'
import FraseInfo from '../../data/Box1/frase.js'
import TextoInfo from '../../data/Box1/texto.js'
import ButtonInfo from '../../data/Box1/button.js'
import ImagemInfo from '../../data/Box1/Imagem.js'
import Header from '../../data/Box1/Header.js'
import ToggleDisplay from 'react-toggle-display';




class Box1 extends Component {

	constructor(props){
	super(props)
	this.state = {
		clickVideo:0
	}
}
f
etchVideo = () => {
	console.log("Sorry");
}


	render(){
		return(
			<div className="Box1">
				<div className="Content">
					<div className="Head">
					<nav className="Logo">
						<ul>
						{
              Header.map((item) => {
                var RowElement = (
									<img key={item.descricao} src={item.descricao} alt="logo" />
                )
                return RowElement;
              })
            }						</ul>
					</nav>
					<nav className="Menu">
						<ul>
						{
              MenuInfo.map((item) => {
                var RowElement = (
									<li key={item.descricao}><a href="#">{item.descricao}</a></li>
                )
                return RowElement;
              })
            }
						</ul>
					</nav>
		   		</div>
					<div className="Central">
						<div className="Celular1">
							{
							ImagemInfo.map((item) => {
								var RowElement = (
									<img key={item.descricao} src={item.descricao} alt="Celular_app" height="500px" width="250px" />
								)
								return RowElement;
							})
							}
						</div>
      	<ToggleDisplay show={this.state.clickVideo != 0 ? false : true}>
						<div className="Texto1">
							{
              FraseInfo.map((item) => {
                var RowElement = (
									<h1 key={item.descricao}>{item.descricao}</h1>
                )
                return RowElement;
              })
	            }
							{
              TextoInfo.map((item) => {
                var RowElement = (
									<p key={item.descricao}> {item.descricao}</p>
                )
                return RowElement;
              })
	            }
							<div className="Button">
							{
							ButtonInfo.map((item) => {
								var RowElement = (
									<a key={item.descricao} onClick={item.link}><img src={item.descricao} alt="" height="50px" width="250px" /></a>
								)
								return RowElement;
							})
							}
							</div>
	     			</div>
					</ToggleDisplay>
					<ToggleDisplay show={this.state.clickVideo != 0 ? true : false}>
					<div className="Video">
						<iframe width="560" height="315" src="https://www.youtube.com/embed/yzTuBuRdAyA" frameborder="0" allowfullscreen></iframe>
					</div>
					</ToggleDisplay>
					</div>
				</div>
			</div>
		)
	}
}

export default Box1;

							}
              
 =========================================== =========================================== =========================================== ===========================================
              
              'use strict';

let Button = [
  {
  id:1,
  descricao: '../../images/Box1/watch video.png',
  link:'fetchVideo()'
  },
  {
  id:2,
  descricao: '../../images/Box1/download app btn.png',
  link:''
  }
]
export default Button;

 =========================================== =========================================== =========================================== ===========================================