1import React from 'react' 2import Terminal from './Terminal' 3import styled from 'styled-components' 4 5const Container = styled.div` 6 position: relative; 7 height: 350px; 8 width: 80%; 9 margin: auto; 10 left: -4%; 11 12 @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) { 13 height: 400px; 14 } 15` 16 17class Windows extends React.Component { 18 constructor (props) { 19 super(props) 20 this.state = { 21 showTopTerminal: true, 22 showMiddleTerminal: true, 23 showBottomTerminal: true, 24 counter: 0 25 } 26 this.onHide = this.onHide.bind(this) 27 } 28 29 onHide (terminal) { 30 this.setState({ [terminal]: false, counter: this.state.counter + 1 }, () => { 31 if (this.state.counter === 3) { 32 this.setState({ 33 showTopTerminal: true, 34 showMiddleTerminal: true, 35 showBottomTerminal: true, 36 counter: 0 37 }) 38 } 39 }) 40 } 41 42 render () { 43 return ( 44 <Container> 45 {this.state.showTopTerminal && 46 <Terminal 47 onClose={() => this.onHide('showTopTerminal')} 48 top={'0%'} 49 left={'0%'} 50 /> 51 } 52 53 {this.state.showMiddleTerminal && 54 <Terminal 55 onClose={() => this.onHide('showMiddleTerminal')} 56 top={'8%'} 57 left={'5%'} 58 /> 59 } 60 61 {this.state.showBottomTerminal && 62 <Terminal 63 onClose={() => this.onHide('showBottomTerminal')} 64 top={'16%'} 65 left={'10%'} 66 /> 67 } 68 </Container> 69 ) 70 } 71} 72 73export default Windows 74