@@ -5,87 +5,87 @@ import * as G from 'typings/graphql'
55import Markdown from '../../components/Markdown'
66
77const styles = {
8- page :{
9- position :'relative' as 'relative' ,
10- display :'flex' as 'flex' ,
11- flexDirection :'column' as 'column' ,
12- width :'100%' ,
13- } ,
14- summary :{
15- padding :'0rem 1rem 1rem 1rem' ,
16- } ,
17- title :{
18- fontWeight :'bold' as 'bold' ,
19- } ,
20- description :{
21- fontSize :'1rem' ,
22- } ,
23- header :{
24- height :'36px' ,
25- backgroundColor :'#EBEBEB' ,
26- fontSize :'16px' ,
27- lineHeight :'16px' ,
28- padding :'10px 1rem' ,
29- } ,
30- levelList :{
31- padding :'0rem 1rem' ,
32- } ,
33- options :{
34- position :'absolute' as 'absolute' ,
35- bottom :0 ,
36- display :'flex' as 'flex' ,
37- flexDirection :'row' as 'row' ,
38- alignItems :'center' as 'center' ,
39- justifyContent :'flex-end' as 'flex-end' ,
40- height :'50px' ,
41- padding :'1rem' ,
42- paddingRight :'2rem' ,
43- backgroundColor :'black' ,
44- width :'100%' ,
45- } ,
8+ page :{
9+ position :'relative' as 'relative' ,
10+ display :'flex' as 'flex' ,
11+ flexDirection :'column' as 'column' ,
12+ width :'100%' ,
13+ } ,
14+ summary :{
15+ padding :'0rem 1rem 1rem 1rem' ,
16+ } ,
17+ title :{
18+ fontWeight :'bold' as 'bold' ,
19+ } ,
20+ description :{
21+ fontSize :'1rem' ,
22+ } ,
23+ header :{
24+ height :'36px' ,
25+ backgroundColor :'#EBEBEB' ,
26+ fontSize :'16px' ,
27+ lineHeight :'16px' ,
28+ padding :'10px 1rem' ,
29+ } ,
30+ levelList :{
31+ padding :'0rem 1rem' ,
32+ } ,
33+ options :{
34+ position :'absolute' as 'absolute' ,
35+ bottom :0 ,
36+ display :'flex' as 'flex' ,
37+ flexDirection :'row' as 'row' ,
38+ alignItems :'center' as 'center' ,
39+ justifyContent :'flex-end' as 'flex-end' ,
40+ height :'50px' ,
41+ padding :'1rem' ,
42+ paddingRight :'2rem' ,
43+ backgroundColor :'black' ,
44+ width :'100%' ,
45+ } ,
4646}
4747
4848interface Props {
49- title :string
50- description :string
51- levels :G . Level [ ]
52- onNext ( ) :void
49+ title :string
50+ description :string
51+ levels :G . Level [ ]
52+ onNext ( ) :void
5353}
5454
5555const Summary = ( { title, description, levels, onNext} :Props ) => (
56- < div style = { styles . page } >
57- < div >
58- < div style = { styles . header } >
59- < span > CodeRoad</ span >
60- </ div >
61- < div style = { styles . summary } >
62- < h2 style = { styles . title } > { title } </ h2 >
63- < Markdown > { description } </ Markdown >
64- </ div >
65- < div >
66- < div style = { styles . header } >
67- < span > Levels</ span >
68- </ div >
69- < div style = { styles . levelList } >
70- { levels . map ( ( level :G . Level , index :number ) => (
71- < div key = { index } >
72- < h4 >
73- { index + 1 } .{ level . title }
74- </ h4 >
75- < div > { level . description } </ div >
76- </ div >
77- ) ) }
78- </ div >
79- </ div >
80- </ div >
56+ < div style = { styles . page } >
57+ < div >
58+ < div style = { styles . header } >
59+ < span > CodeRoad</ span >
60+ </ div >
61+ < div style = { styles . summary } >
62+ < h2 style = { styles . title } > { title } </ h2 >
63+ < Markdown > { description } </ Markdown >
64+ </ div >
65+ < div >
66+ < div style = { styles . header } >
67+ < span > Levels</ span >
68+ </ div >
69+ < div style = { styles . levelList } >
70+ { levels . map ( ( level :G . Level , index :number ) => (
71+ < div key = { index } >
72+ < h4 >
73+ { index + 1 } .{ level . title }
74+ </ h4 >
75+ < div > { level . description } </ div >
76+ </ div >
77+ ) ) }
78+ </ div >
79+ </ div >
80+ </ div >
8181
82- < div style = { styles . options } >
83- { /* TODO: Add back button */ }
84- < Button type = "primary" onClick = { ( ) => onNext ( ) } >
85- Start
86- </ Button >
87- </ div >
88- </ div >
82+ < div style = { styles . options } >
83+ { /* TODO Add back button */ }
84+ < Button type = "primary" onClick = { ( ) => onNext ( ) } >
85+ Start
86+ </ Button >
87+ </ div >
88+ </ div >
8989)
9090
9191export default Summary