@@ -87,6 +87,9 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
87
87
const { t } = useTranslation ( "page-index" )
88
88
const { pastEventData, upcomingEventData } = events
89
89
90
+ const reversedUpcomingEventData = upcomingEventData . slice ( ) . reverse ( )
91
+ const reversedPastEventData = pastEventData . slice ( ) . reverse ( )
92
+
90
93
return (
91
94
< Flex
92
95
w = "full"
@@ -100,14 +103,12 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
100
103
< Center w = { { base : "100%" , lg : "40%" } } >
101
104
< Box pe = { 8 } ps = { { base : 8 , lg : 0 } } >
102
105
< OldHeading >
103
- { t ( "page-index:community-events-content-heading" ) }
106
+ { t ( "page-index:community-events-content-heading" ) }
104
107
</ OldHeading >
105
108
< Text >
106
109
< Translation id = "page-index:community-events-content-1" />
107
110
</ Text >
108
- < Text >
109
- { t ( "page-index:community-events-content-2" ) }
110
- </ Text >
111
+ < Text > { t ( "page-index:community-events-content-2" ) } </ Text >
111
112
</ Box >
112
113
</ Center >
113
114
< Flex
@@ -123,21 +124,24 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
123
124
flexDir = "column"
124
125
>
125
126
< Flex direction = "column" h = "full" gap = { 8 } >
126
- { upcomingEventData . length ? (
127
+ { reversedUpcomingEventData . length ? (
127
128
< Box flex = { 1 } >
128
129
< Text fontSize = "3xl" fontWeight = "bold" lineHeight = { 1.4 } >
129
- { upcomingEventData [ 0 ] . title }
130
+ { reversedUpcomingEventData [ 0 ] . title }
130
131
</ Text >
131
132
< Text m = { 0 } fontSize = "xl" >
132
- { renderEventDateTime ( upcomingEventData [ 0 ] . date , locale ! ) }
133
+ { renderEventDateTime (
134
+ reversedUpcomingEventData [ 0 ] . date ,
135
+ locale !
136
+ ) }
133
137
</ Text >
134
138
< Text color = "body.medium" fontSize = "md" >
135
139
({ Intl . DateTimeFormat ( ) . resolvedOptions ( ) . timeZone } )
136
140
</ Text >
137
141
</ Box >
138
142
) : (
139
143
< Text fontSize = "3xl" fontWeight = "bold" mb = { 8 } >
140
- { t ( "page-index:community-events-no-events-planned" ) }
144
+ { t ( "page-index:community-events-no-events-planned" ) }
141
145
</ Text >
142
146
) }
143
147
< Flex flexDirection = "column" gap = { 2 } >
@@ -149,9 +153,9 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
149
153
< Icon as = { FaDiscord } fontSize = { 25 } />
150
154
Join Discord
151
155
</ ButtonLink >
152
- { upcomingEventData [ 0 ] && (
156
+ { reversedUpcomingEventData [ 0 ] && (
153
157
< InlineLink
154
- to = { upcomingEventData [ 0 ] . calendarLink }
158
+ to = { reversedUpcomingEventData [ 0 ] . calendarLink }
155
159
onClick = { ( ) => matomoEvent ( "Add to calendar" ) }
156
160
fontWeight = { 700 }
157
161
>
@@ -168,11 +172,11 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
168
172
flexDir = "column"
169
173
>
170
174
< Text fontSize = "lg" fontWeight = "bold" mb = { 2 } >
171
- { t ( "page-index:community-events-upcoming-calls" ) }
175
+ { t ( "page-index:community-events-upcoming-calls" ) }
172
176
</ Text >
173
177
< Divider mb = { 4 } />
174
- { upcomingEventData . slice ( 1 ) . length ? (
175
- upcomingEventData . slice ( 1 ) . map ( ( item , idx ) => {
178
+ { reversedUpcomingEventData . slice ( 1 ) . length ? (
179
+ reversedUpcomingEventData . slice ( 1 ) . map ( ( item , idx ) => {
176
180
return (
177
181
< Event
178
182
key = { idx }
@@ -184,22 +188,22 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
184
188
} )
185
189
) : (
186
190
< Text mx = "auto" >
187
- { t ( "page-index:community-events-no-upcoming-calls" ) }
191
+ { t ( "page-index:community-events-no-upcoming-calls" ) }
188
192
</ Text >
189
193
) }
190
194
< Text fontSize = "lg" fontWeight = "bold" mb = { 2 } mt = { 4 } >
191
- { t ( "page-index:community-events-previous-calls" ) }
195
+ { t ( "page-index:community-events-previous-calls" ) }
192
196
</ Text >
193
197
< Divider mb = { 4 } />
194
- { pastEventData . length ? (
195
- pastEventData . map ( ( item , idx ) => {
198
+ { reversedPastEventData . length ? (
199
+ reversedPastEventData . map ( ( item , idx ) => {
196
200
return (
197
201
< Event key = { idx } event = { item } language = { locale ! } type = "past" />
198
202
)
199
203
} )
200
204
) : (
201
205
< Text mx = "auto" >
202
- { t ( "page-index:community-events-there-are-no-past-calls" ) }
206
+ { t ( "page-index:community-events-there-are-no-past-calls" ) }
203
207
</ Text >
204
208
) }
205
209
</ Flex >
0 commit comments