@@ -5,87 +5,87 @@ import * as G from 'typings/graphql'
5
5
import Markdown from '../../components/Markdown'
6
6
7
7
const 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
+ } ,
46
46
}
47
47
48
48
interface 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
53
53
}
54
54
55
55
const 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 >
81
81
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 >
89
89
)
90
90
91
91
export default Summary