|
1 | 1 | import*asReactfrom'react' |
| 2 | +import*asCRfrom'typings' |
| 3 | +import*asGfrom'typings/graphql' |
| 4 | +import{css,jsx}from'@emotion/core' |
| 5 | +importButtonfrom'../../components/Button' |
| 6 | +importCardfrom'../../components/Card' |
2 | 7 |
|
3 | | -constLaunchPage=()=>{ |
4 | | -return( |
5 | | -<div> |
6 | | -<span>Welcome To</span> |
7 | | -<h1>CodeRoad</h1> |
8 | | -<div> |
9 | | -<h3>New Tutorial</h3> |
10 | | -<h3>Continue Tutorial</h3> |
| 8 | +conststyles={ |
| 9 | +page:{ |
| 10 | +position:'relative'as'relative', |
| 11 | +display:'flex', |
| 12 | +flexDirection:'column', |
| 13 | +width:'100%', |
| 14 | +height:window.innerHeight, |
| 15 | +}, |
| 16 | +header:{ |
| 17 | +flex:1, |
| 18 | +display:'flex'as'flex', |
| 19 | +flexDirection:'column', |
| 20 | +justifyContent:'flex-end'as'flex-end', |
| 21 | +alignItems:'center'as'center', |
| 22 | +backgroundColor:'#EBEBEB', |
| 23 | +fontSize:'1rem', |
| 24 | +lineHeight:'1rem', |
| 25 | +padding:'10px 1rem', |
| 26 | +}, |
| 27 | +title:{ |
| 28 | +fontSize:'4rem', |
| 29 | +}, |
| 30 | +subtitle:{ |
| 31 | +fontSize:'1.6rem', |
| 32 | +}, |
| 33 | +options:{ |
| 34 | +flex:1, |
| 35 | +display:'flex'as'flex', |
| 36 | +flexDirection:'column'as'column', |
| 37 | +justifyContent:'flex-start'as'flex-start', |
| 38 | +alignItems:'center'as'center', |
| 39 | +}, |
| 40 | +buttonContainer:{ |
| 41 | +margin:'1rem', |
| 42 | +}, |
| 43 | +} |
| 44 | + |
| 45 | +interfaceProps{ |
| 46 | +onContinue():void |
| 47 | +onNew():void |
| 48 | +tutorial?:G.Tutorial |
| 49 | +} |
| 50 | + |
| 51 | +exportconstLaunchPage=(props:Props)=>( |
| 52 | +<divcss={styles.page}> |
| 53 | +<divcss={styles.header}> |
| 54 | +<h1css={styles.title}>CodeRoad</h1> |
| 55 | +<h3css={styles.subtitle}>Play Interactive Coding Tutorials in VSCode</h3> |
| 56 | +</div> |
| 57 | + |
| 58 | +<divcss={styles.options}> |
| 59 | +<divcss={styles.buttonContainer}> |
| 60 | +<Buttonsize="large"type="primary"onClick={props.onNew}style={{width:'8rem'}}> |
| 61 | + Start |
| 62 | +</Button> |
11 | 63 | </div> |
| 64 | +{props.tutorial&&( |
| 65 | +<divcss={styles.buttonContainer}> |
| 66 | +<Buttonsize="large"onClick={props.onContinue}style={{width:'8rem'}}> |
| 67 | + Continue |
| 68 | +</Button> |
| 69 | +</div> |
| 70 | +)} |
12 | 71 | </div> |
| 72 | +</div> |
| 73 | +) |
| 74 | + |
| 75 | +interfaceContainerProps{ |
| 76 | +context:CR.MachineContext |
| 77 | +send(action:CR.Action|string):void |
| 78 | +} |
| 79 | + |
| 80 | +constLaunchPageContainer=({ context, send}:ContainerProps)=>{ |
| 81 | +const{ tutorial}=context |
| 82 | +return( |
| 83 | +<LaunchPageonContinue={()=>send('TUTORIAL_START')}onNew={()=>send('TUTORIAL_SELECT')}tutorial={tutorial}/> |
13 | 84 | ) |
14 | 85 | } |
15 | 86 |
|
16 | | -exportdefaultLaunchPage |
| 87 | +exportdefaultLaunchPageContainer |