11import * as React from 'react'
22import * as CR from 'typings'
33import * as TT from 'typings/tutorial'
4+ import { Progress } from '@alifd/next'
45import BetaBadge from '../../components/BetaBadge'
56import { css , jsx } from '@emotion/core'
67import Button from '../../components/Button'
@@ -41,7 +42,29 @@ const styles = {
4142justifyContent :'flex-start' as 'flex-start' ,
4243alignItems :'center' as 'center' ,
4344} ,
45+ buttonLarge :( theme :Theme ) => ( {
46+ padding :'0.2rem 1rem' ,
47+ border :`solid 1px${ theme [ '$color-line1-3' ] } ,
48+ borderRadius :'3px' ,
49+ minHeight :'2rem' ,
50+ fontSize :'16px' ,
51+ backgroundColor :'white' ,
52+ lineHeight :'1.5rem' ,
53+ color :theme [ '$color-text1-4' ] ,
54+ '&:hover,&:focus' :css ( {
55+ backgroundColor :theme [ '$color-fill1-1' ] ,
56+ borderColor :theme [ '$color-line1-4' ] ,
57+ } ) ,
58+ } ) ,
59+ continueTitle :( theme :Theme ) => ( {
60+ color :theme [ '$color-text1-3' ] ,
61+ fontSize :'12px' ,
62+ } ) ,
4463buttonContainer :{
64+ display :'flex' as 'flex' ,
65+ flexDirection :'column' as 'column' ,
66+ justifyContent :'center' as 'center' ,
67+ alignItems :'center' as 'center' ,
4568margin :'0.5rem' ,
4669} ,
4770}
@@ -50,6 +73,7 @@ interface Props {
5073onContinue ( ) :void
5174onNew ( ) :void
5275tutorial ?:TT . Tutorial
76+ progress ?:number
5377}
5478
5579export const StartPage = ( props :Props ) => (
@@ -72,9 +96,11 @@ export const StartPage = (props: Props) => (
7296</ div >
7397{ props . tutorial && (
7498< div css = { styles . buttonContainer } >
75- < Button size = "large" onClick = { props . onContinue } style = { { padding :'0 1rem' } } >
76- Continue Current Tutorial
77- </ Button >
99+ < button onClick = { props . onContinue } css = { styles . buttonLarge } >
100+ Continue Tutorial
101+ < div css = { styles . continueTitle } > "{ props . tutorial . summary . title } "</ div >
102+ < Progress style = { { marginLeft :'1rem' } } percent = { props . progress || 0 } hasBorder size = "large" />
103+ </ button >
78104</ div >
79105) }
80106</ div >
@@ -88,11 +114,18 @@ interface ContainerProps {
88114
89115const StartPageContainer = ( { context, send} :ContainerProps ) => {
90116const tutorial = context . tutorial || undefined
117+ let progress
118+ if ( tutorial ) {
119+ const totalLevels = tutorial . levels . length
120+ const firstIncompleteLevelIndex = tutorial . levels . findIndex ( ( level ) => ! context . progress . levels [ level . id ] )
121+ progress = Math . round ( ( firstIncompleteLevelIndex / totalLevels ) * 100 )
122+ }
91123return (
92124< StartPage
93125onContinue = { ( ) => send ( { type :'CONTINUE_TUTORIAL' } ) }
94126onNew = { ( ) => send ( { type :'NEW_TUTORIAL' } ) }
95127tutorial = { tutorial }
128+ progress = { progress }
96129/>
97130)
98131}