@@ -17,127 +17,112 @@ import { graphql } from 'gatsby';
17
17
const community = ( { data } ) => {
18
18
const tutorials = data . tutorials . edges ;
19
19
return (
20
- < WithCurrentUser >
21
- { ( { user, loading } ) => {
22
- return (
23
- < Layout >
24
- < Flex flexDirection = "column" alignItems = "center" p = { 4 } >
25
- < Box
26
- style = { {
27
- backgroundImage : `url(${ 'https://i.ibb.co/S736mwr/Bg.png' } )` ,
28
- backgroundPosition : 'center' ,
29
- backgroundSize : 'cover' ,
30
- } }
31
- >
32
- < Flex
33
- flexDirection = "row"
34
- alignItems = "center"
35
- justifyContent = "center"
36
- flexWrap = "wrap"
37
- >
38
- < HeaderText width = { 1 / 4 } >
39
- < Heading p = { 3 } fontSize = { 5 } color = "#515273" >
40
- Community Tutorials
41
- </ Heading >
42
- < Text p = { 3 } color = "#515273" >
43
- Learn from a wide range of topics. Client or server,
44
- beginner or advanced, theoretical or code-along – discover
45
- the tutorials contributed by the GraphQL community!
46
- </ Text >
47
- </ HeaderText >
20
+ < Layout >
21
+ < Flex flexDirection = "column" alignItems = "center" p = { 4 } >
22
+ < Box
23
+ style = { {
24
+ backgroundImage : `url(${ 'https://i.ibb.co/S736mwr/Bg.png' } )` ,
25
+ backgroundPosition : 'center' ,
26
+ backgroundSize : 'cover' ,
27
+ } }
28
+ >
29
+ < Flex
30
+ flexDirection = "row"
31
+ alignItems = "center"
32
+ justifyContent = "center"
33
+ flexWrap = "wrap"
34
+ >
35
+ < HeaderText width = { 1 / 4 } >
36
+ < Heading p = { 3 } fontSize = { 5 } color = "#515273" >
37
+ Community Tutorials
38
+ </ Heading >
39
+ < Text p = { 3 } color = "#515273" >
40
+ Learn from a wide range of topics. Client or server, beginner or
41
+ advanced, theoretical or code-along – discover the tutorials
42
+ contributed by the GraphQL community!
43
+ </ Text >
44
+ </ HeaderText >
48
45
49
- < HeaderText >
50
- < img src = "https://i.ibb.co/pKM9XgL/Illustration.png" />
51
- </ HeaderText >
46
+ < HeaderText >
47
+ < img src = "https://i.ibb.co/pKM9XgL/Illustration.png" />
48
+ </ HeaderText >
52
49
53
- < FilterBox marginTop = { 25 } >
54
- < Text p = { 3 } > FOR FILTER BOX </ Text >
55
- </ FilterBox >
56
- </ Flex >
57
- </ Box >
58
- </ Flex >
50
+ < FilterBox marginTop = { 25 } >
51
+ < Text p = { 3 } > FOR FILTER BOX </ Text >
52
+ </ FilterBox >
53
+ </ Flex >
54
+ </ Box >
55
+ </ Flex >
59
56
60
- < TutorialContent >
61
- < TutorialNumber m = { 3 } width = { 5 / 5 } >
62
- < p >
63
- < span > { tutorials . length } TUTORIALS </ span >
64
- </ p >
65
- </ TutorialNumber >
66
- < Content >
67
- { tutorials . map ( tutorial => {
68
- return (
69
- < div key = { tutorial . node . id } >
70
- < TutorialListing tutorial = { tutorial . node } />
71
- </ div >
72
- ) ;
73
- } ) }
74
- </ Content >
75
- </ TutorialContent >
76
- < Footer height = { 5 / 5 } p = { 5 } paddingRight = { 100 } paddingLeft = { 100 } >
77
- < Heading > Contributors</ Heading >
78
- < div >
79
- l ac, feugiat convallis magna. Nam dignissim semper mauris,
80
- pharetra mollis neque viverra ac. Duis semper, odio quis
81
- tincidunt convallis, libero mi tristique ipsum.l ac, feugiat
82
- convallis magna. Nam dignissim semper mauris, pharetra mollis
83
- neque viverra ac. Duis semper, odio quis tincidunt convallis,
84
- libero mi tristique ipsum.
57
+ < TutorialContent >
58
+ < TutorialNumber m = { 3 } width = { 5 / 5 } >
59
+ < p >
60
+ < span > { tutorials . length } TUTORIALS </ span >
61
+ </ p >
62
+ </ TutorialNumber >
63
+ < Content >
64
+ { tutorials . map ( tutorial => {
65
+ return (
66
+ < div key = { tutorial . node . id } >
67
+ < TutorialListing tutorial = { tutorial . node } />
85
68
</ div >
86
- < Flex flexDirection = "row" backgroundColor = "orange" marginTop = { 5 } >
87
- < Box
88
- backgroundColor = "#F6F6F8"
89
- p = { 4 }
90
- width = { 2 / 4 }
91
- alignContent = "flex-start"
92
- >
93
- < Heading color = "#515273" textAlign = "left" >
94
- Nullam ultrices massa
95
- </ Heading >
96
- < Text color = "#515273" textAlign = "left" >
97
- l ac, feugiat convallis magna. Nam dignissim semper mauris,
98
- pharetra mollis neque viverra ac. Duis semper, odio quis
99
- tincidunt convallis, libero mi tristique ipsum.
100
- </ Text >
101
- < Button m = { 3 } > Write a Tutorial</ Button >
102
- </ Box >
103
- < Box p = { 2 } >
104
- < Text fontSize = { [ 1 ] } textAlign = "left" >
105
- CORE CONTRIBUTORS
106
- </ Text >
107
- { user && (
108
- < Image
109
- width = { [ 0.5 , 0.3 , 0.12 ] }
110
- src = { user . avatarUrl }
111
- borderRadius = { 100 }
112
- />
113
- ) }
114
- < Text fontSize = { [ 1 ] } textAlign = "left" >
115
- COURSE CONTRIBUTORS
116
- </ Text >
117
- { user && (
118
- < Image
119
- width = { [ 0.5 , 0.3 , 0.12 ] }
120
- src = { user . avatarUrl }
121
- borderRadius = { 100 }
122
- />
123
- ) }
124
- < Text fontSize = { [ 1 ] } textAlign = "left" >
125
- TUTORIAL CONTRIBUTORS
126
- </ Text >
127
- { user && (
128
- < Image
129
- width = { [ 0.5 , 0.3 , 0.12 ] }
130
- src = { user . avatarUrl }
131
- borderRadius = { 100 }
132
- />
133
- ) }
134
- </ Box >
135
- </ Flex >
136
- </ Footer >
137
- </ Layout >
138
- ) ;
139
- } }
140
- </ WithCurrentUser >
69
+ ) ;
70
+ } ) }
71
+ </ Content >
72
+ </ TutorialContent >
73
+ < Footer height = { 5 / 5 } p = { 5 } paddingRight = { 100 } paddingLeft = { 100 } >
74
+ < Heading > Contributors</ Heading >
75
+ < div >
76
+ l ac, feugiat convallis magna. Nam dignissim semper mauris, pharetra
77
+ mollis neque viverra ac. Duis semper, odio quis tincidunt convallis,
78
+ libero mi tristique ipsum.l ac, feugiat convallis magna. Nam dignissim
79
+ semper mauris, pharetra mollis neque viverra ac. Duis semper, odio
80
+ quis tincidunt convallis, libero mi tristique ipsum.
81
+ </ div >
82
+ < Flex flexDirection = "row" backgroundColor = "orange" marginTop = { 5 } >
83
+ < Box
84
+ backgroundColor = "#F6F6F8"
85
+ p = { 4 }
86
+ width = { 2 / 4 }
87
+ alignContent = "flex-start"
88
+ >
89
+ < Heading color = "#515273" textAlign = "left" >
90
+ Nullam ultrices massa
91
+ </ Heading >
92
+ < Text color = "#515273" textAlign = "left" >
93
+ l ac, feugiat convallis magna. Nam dignissim semper mauris,
94
+ pharetra mollis neque viverra ac. Duis semper, odio quis tincidunt
95
+ convallis, libero mi tristique ipsum.
96
+ </ Text >
97
+ < Button m = { 3 } > Write a Tutorial</ Button >
98
+ </ Box >
99
+ < Box p = { 2 } >
100
+ < Text fontSize = { [ 1 ] } textAlign = "left" >
101
+ CORE CONTRIBUTORS
102
+ </ Text >
103
+ < Image
104
+ width = { [ 20 , 30 , 40 ] }
105
+ src = "https://i.ibb.co/h1hf2Ss/Avatar.png"
106
+ borderRadius = { 100 }
107
+ />
108
+ < Text fontSize = { [ 1 ] } textAlign = "left" >
109
+ COURSE CONTRIBUTORS
110
+ </ Text >
111
+ < Image
112
+ width = { [ 20 , 30 , 40 ] }
113
+ src = "https://i.ibb.co/h1hf2Ss/Avatar.png"
114
+ />
115
+ < Text fontSize = { [ 1 ] } textAlign = "left" >
116
+ TUTORIAL CONTRIBUTORS
117
+ </ Text >
118
+ < Image
119
+ width = { [ 20 , 30 , 40 ] }
120
+ src = "https://i.ibb.co/h1hf2Ss/Avatar.png"
121
+ />
122
+ </ Box >
123
+ </ Flex >
124
+ </ Footer >
125
+ </ Layout >
141
126
) ;
142
127
} ;
143
128
0 commit comments