1import React from 'react' 2import styled, {keyframes} from 'styled-components' 3import {Flex, Box, Button as RebassButton} from 'rebass' 4import closeX from '../../images/x.svg' 5import {LinkButton} from '../Button' 6import bracket from '../../images/bracket.svg' 7 8const TerminalBody = styled(Flex)` 9 background-color: ${(props) => props.theme.colors.purpleBlack}; 10 border: 2px solid ${(props) => props.theme.colors.purpleBlack}; 11 color: ${(props) => props.theme.colors.white}; 12 flex-direction: column; 13 max-width: 620px; 14 width: 100%; 15 height: 100%; 16 box-shadow: 0px 0px 17px 1px #dc3bc180; 17 border-radius: 2px; 18 top: ${(props) => props.top}; 19 left: ${(props) => props.left}; 20 right: 0; 21 position: absolute; 22` 23 24const Top = styled(Flex)` 25 background-color: ${(props) => props.theme.colors.white}; 26 height: 18px; 27` 28 29const SiteName = styled(Flex)` 30 font-size: 45px; 31 font-family: 'Inconsolata', sans-serif; 32 font-weight: 700; 33 letter-spacing: 5px; 34 text-shadow: 3px 2px 4px #abf1e04d; 35 36 @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) { 37 font-size: 70px; 38 } 39` 40 41const Bottom = styled(Flex)` 42 flex-direction: column; 43 padding: 30px; 44 45 @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) { 46 font-size: 70px; 47 padding: 30px 50px; 48 49 } 50` 51 52const blink = keyframes` 53 0% { 54 opacity: 0; 55 } 56 50% { 57 opacity 1; 58 } 59 100% { 60 opacity: 0; 61 } 62` 63 64const Cursor = styled.span` 65 color: ${(props) => props.theme.colors.red}; 66 text-shadow: none; 67 opacity: 1; 68 animation: ${blink}; 69 animation-duration: 3s; 70 animation-iteration-count: infinite; 71 animation-fill-mode: both; 72` 73 74const Bracket = styled.span` 75 background: center / contain no-repeat url(${bracket}); 76 width: 25px; 77 margin-right: 5px; 78 margin-top: 10px; 79` 80 81const Text = styled.span` 82 font-size: 15px; 83 font-weight: 400; 84 letter-spacing: 1px; 85 line-height: 1.4; 86 87 @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) { 88 font-size: 18px; 89 } 90` 91 92const ModalButton = styled(RebassButton)` 93 cursor: pointer; 94 background: center no-repeat url(${closeX}); 95 width: 14px; 96 height: 14px; 97` 98 99const Terminal = ({onClose, top, left}) => { 100 return ( 101 <TerminalBody m={'auto'} top={top} left={left}> 102 <Top alignItems='center'> 103 <ModalButton onClick={onClose} ml={1} p={1} /> 104 </Top> 105 <Bottom> 106 <SiteName py={3}><Bracket />npm cli <Cursor>_</Cursor></SiteName> 107 <Text> 108 The intelligent package manager for the Node Javascript Platform. Install stuff and get coding! 109 </Text> 110 <Box mx={'auto'} my={4}> 111 <LinkButton to='/cli-commands/npm'> 112 read docs 113 </LinkButton> 114 </Box> 115 </Bottom> 116 </TerminalBody> 117 ) 118} 119 120export default Terminal 121
