@@ -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
0 commit comments