@@ -83,7 +83,7 @@ function shareOnLinkedIn() {
83
83
84
84
// Google Photos Album Section
85
85
const source =
86
- " https://raw.githubusercontent.com/Front-End-Coders-Mauritius /google-photos-sync/main/" ;
86
+ " https://raw.githubusercontent.com/frontendmu /google-photos-sync/main/" ;
87
87
// let currentAlbum = ref([])
88
88
// const { data: albumsPhotos, pending, error, refresh } = await useFetch(`${source}index.json`)
89
89
const albumsPhotos = ref (" " );
@@ -123,172 +123,102 @@ const viewMore = () => {
123
123
<div class =" pt-8 pb-10 md:pt-16 md:pb-24" >
124
124
<div class =" lg:mx-auto overflow-hidden lg:max-w-[1400px] lg:px-4" >
125
125
<div class =" relative" >
126
- <div
127
- aria-hidden =" true"
128
- class =" hidden sm:block lg:inset-y-0 lg:right-0 lg:w-screen"
129
- >
130
- <div
131
- class =" inset-y-0 right-1/2 w-full rounded-r-3xl bg-gray-50 lg:right-72"
132
- />
126
+ <div aria-hidden =" true" class =" hidden sm:block lg:inset-y-0 lg:right-0 lg:w-screen" >
127
+ <div class =" inset-y-0 right-1/2 w-full rounded-r-3xl bg-gray-50 lg:right-72" />
133
128
<IconDots class =" w-[600px] opacity-5 saturate-0" />
134
129
</div >
135
130
</div >
136
131
137
- <div
138
- class =" relative mx-auto px-8 py-3 sm:max-w-4xl sm:px-6 md:px-0 md:mx-0 md:py-0"
139
- >
132
+ <div class =" relative mx-auto px-8 py-3 sm:max-w-4xl sm:px-6 md:px-0 md:mx-0 md:py-0" >
140
133
<!-- Content area -->
141
134
<div >
142
135
<div class =" flex w-full items-center justify-end" >
143
- <p
144
- :class =" [
145
- isUpcoming
146
- ? 'tagStyle bg-yellow-100 text-yellow-800'
147
- : 'tagStyle bg-green-100 text-green-800',
148
- ]"
149
- >
136
+ <p :class =" [
137
+ isUpcoming
138
+ ? 'tagStyle bg-yellow-100 text-yellow-800'
139
+ : 'tagStyle bg-green-100 text-green-800',
140
+ ]" >
150
141
{{ isUpcoming ? "past" : "upcoming" }}
151
142
</p >
152
143
</div >
153
- <h1
154
- class =" text-3xl font-extrabold font-mono tracking-tight text-gray-900 md:text-4xl lg:text-5xl"
155
- >
144
+ <h1 class =" text-3xl font-extrabold font-mono tracking-tight text-gray-900 md:text-4xl lg:text-5xl" >
156
145
{{ props.getCurrentEvent?.title }}
157
146
</h1 >
158
- <div
159
- v-if =" props.getCurrentEvent.description"
160
- class =" mt-6 space-y-6 text-gray-500"
161
- >
162
- <div
163
- class =" text-md prose md:text-lg"
164
- v-html =" props.getCurrentEvent.description"
165
- />
147
+ <div v-if =" props.getCurrentEvent.description" class =" mt-6 space-y-6 text-gray-500" >
148
+ <div class =" text-md prose md:text-lg" v-html =" props.getCurrentEvent.description" />
166
149
</div >
167
150
<div v-else class =" text-md prose md:text-lg" >
168
151
Please add a description.
169
152
</div >
170
153
</div >
171
154
<!-- Stats section -->
172
155
<div class =" mt-10" >
173
- <dl
174
- class =" grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 md:gap-y-8"
175
- >
176
- <div
177
- v-if =" props.getCurrentEvent.Date"
178
- class =" border-t-2 border-gray-100 pt-6"
179
- >
156
+ <dl class =" grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 md:gap-y-8" >
157
+ <div v-if =" props.getCurrentEvent.Date" class =" border-t-2 border-gray-100 pt-6" >
180
158
<dt class =" text-base font-medium text-gray-500" >Date</dt >
181
- <dd
182
- class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl"
183
- >
159
+ <dd class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl" >
184
160
{{ new Date(props.getCurrentEvent.Date).toDateString() }}
185
161
</dd >
186
162
</div >
187
- <div
188
- v-if =" props.getCurrentEvent.Venue"
189
- class =" border-t-2 border-gray-100 pt-4 md:pt-6"
190
- >
163
+ <div v-if =" props.getCurrentEvent.Venue" class =" border-t-2 border-gray-100 pt-4 md:pt-6" >
191
164
<dt class =" text-base font-medium text-gray-500" >Venue</dt >
192
- <dd
193
- class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl"
194
- >
165
+ <dd class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl" >
195
166
{{ props.getCurrentEvent.Venue }}
196
167
</dd >
197
168
</div >
198
- <div
199
- v-if =" props.getCurrentEvent.Time"
200
- class =" border-t-2 border-gray-100 pt-4 md:pt-6"
201
- >
169
+ <div v-if =" props.getCurrentEvent.Time" class =" border-t-2 border-gray-100 pt-4 md:pt-6" >
202
170
<dt class =" text-base font-medium text-gray-500" >Time</dt >
203
- <dd
204
- class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl"
205
- >
171
+ <dd class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl" >
206
172
{{ props.getCurrentEvent.Time }}
207
173
</dd >
208
174
</div >
209
- <div
210
- v-if =" props.getCurrentEvent.Location"
211
- class =" border-t-2 border-gray-100 pt-4 md:pt-6"
212
- >
175
+ <div v-if =" props.getCurrentEvent.Location" class =" border-t-2 border-gray-100 pt-4 md:pt-6" >
213
176
<dt class =" text-base font-medium text-gray-500" >
214
177
Location
215
178
</dt >
216
- <dd
217
- class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl"
218
- >
179
+ <dd class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl" >
219
180
{{ props.getCurrentEvent.Location }}
220
181
</dd >
221
182
</div >
222
- <div
223
- v-if =" props.getCurrentEvent.Attendees"
224
- class =" border-t-2 border-gray-100 pt-6"
225
- >
183
+ <div v-if =" props.getCurrentEvent.Attendees" class =" border-t-2 border-gray-100 pt-6" >
226
184
<dt class =" text-base font-medium text-gray-500" >
227
185
Seats Limit
228
186
</dt >
229
- <dd
230
- class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl"
231
- >
187
+ <dd class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl" >
232
188
{{ props.getCurrentEvent.Attendees }}
233
189
</dd >
234
190
</div >
235
191
236
192
<div class =" border-y-2 border-gray-100 pt-4 md:pt-6" >
237
193
<dt class =" text-base font-medium text-gray-500" >Share</dt >
238
194
<div class =" flex gap-8 py-4" >
239
- <button
240
- class =" hover:text-[#4267B2]"
241
- @click =" shareOnFacebook"
242
- >
195
+ <button class =" hover:text-[#4267B2]" @click =" shareOnFacebook" >
243
196
<icon-facebook class =" w-10 md:w-12" />
244
197
</button >
245
- <button
246
- class =" hover:text-[#00acee]"
247
- @click =" shareOnTwitter"
248
- >
198
+ <button class =" hover:text-[#00acee]" @click =" shareOnTwitter" >
249
199
<icon-twitter class =" w-10 md:w-12" />
250
200
</button >
251
- <button
252
- class =" hover:text-[#007db1]"
253
- @click =" shareOnLinkedIn"
254
- >
201
+ <button class =" hover:text-[#007db1]" @click =" shareOnLinkedIn" >
255
202
<icon-linkedin class =" w-10 md:w-12" />
256
203
</button >
257
204
</div >
258
- <dd
259
- class =" flex justify-between rounded-md bg-gray-100 mt-2 px-2 py-1 lg:w-[450px]"
260
- >
261
- <input
262
- id =" myInput"
205
+ <dd class =" flex justify-between rounded-md bg-gray-100 mt-2 px-2 py-1 lg:w-[450px]" >
206
+ <input id =" myInput"
263
207
class =" text-md break-words bg-gray-100pr-2 tracking-tight bg-gray-100 text-gray-600 line-clamp-3 w-[500px]"
264
- type =" text"
265
- :value =" `https://frontend.mu/meetup/${props.routeId}/`"
266
- />
208
+ type =" text" :value =" `https://frontend.mu/meetup/${props.routeId}/`" />
267
209
<div class =" cursor-pointer" @click =" copy" >
268
- <svg
269
- xmlns =" http://www.w3.org/2000/svg"
270
- class =" h-5 w-5"
271
- viewBox =" 0 0 20 20"
272
- fill =" currentColor"
273
- >
210
+ <svg xmlns =" http://www.w3.org/2000/svg" class =" h-5 w-5" viewBox =" 0 0 20 20" fill =" currentColor" >
211
+ <path d =" M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
274
212
<path
275
- d =" M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
276
- />
277
- <path
278
- d =" M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"
279
- />
213
+ d =" M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
280
214
</svg >
281
215
</div >
282
216
</dd >
283
217
</div >
284
218
285
- <div
286
- v-if =" !isUpcoming"
287
- class =" md:border-t-2 border-gray-100 pt-4 md:pt-8 flex flex-col justify-center items-center md:items-start gap-4"
288
- >
289
- <dd
290
- class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl"
291
- >
219
+ <div v-if =" !isUpcoming"
220
+ class =" md:border-t-2 border-gray-100 pt-4 md:pt-8 flex flex-col justify-center items-center md:items-start gap-4" >
221
+ <dd class =" text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl" >
292
222
<!-- <a
293
223
294
224
class="flex gap-4 w-96 md:w-48 lg:w-56 items-center justify-center md:justify-left rounded-md border border-transparent bg-yellow-500 px-8 py-3 text-base tracking-wide font-extrabold text-white drop-shadow-2xl hover:bg-yellow-600 md:py-2 md:px-4 md:text-lg italic"
@@ -297,44 +227,28 @@ const viewMore = () => {
297
227
298
228
<icon-arrow-right class="md:animate-bounce" />
299
229
</a> -->
300
- <fec-anchor
301
- v-if =" props.getCurrentEvent.rsvplink"
302
- :href =" props.getCurrentEvent.rsvplink"
303
- target =" _blank"
304
- >Book my seat</fec-anchor
305
- >
230
+ <fec-anchor v-if =" props.getCurrentEvent.rsvplink" :href =" props.getCurrentEvent.rsvplink"
231
+ target =" _blank" >Book my seat</fec-anchor >
306
232
</dd >
307
233
</div >
308
234
</dl >
309
235
</div >
310
236
</div >
311
237
</div >
312
238
<div class =" lg:mx-auto lg:max-w-[1400px] px-4" >
313
- <div
314
- v-if =" props.getCurrentEvent.album"
315
- class =" flex flex-col items-center gap-8 py-20"
316
- >
239
+ <div v-if =" props.getCurrentEvent.album" class =" flex flex-col items-center gap-8 py-20" >
317
240
<!-- <pre>
318
241
{{ currentAlbum }}
319
242
</pre> -->
320
243
321
244
<div class =" w-full grid grid-cols-4 gap-4" >
322
- <div
323
- v-for =" photo in currentAlbum"
324
- :key =" photo"
325
- class =" rounded-md overflow-hidden aspect-video"
326
- >
327
- <img
328
- :src =" `${source}/${photo}`"
329
- class =" object-cover w-full h-full object-center block"
330
- />
245
+ <div v-for =" photo in currentAlbum" :key =" photo" class =" rounded-md overflow-hidden aspect-video" >
246
+ <img :src =" `${source}/${photo}`" class =" object-cover w-full h-full object-center block" />
331
247
</div >
332
248
</div >
333
- <div
334
- v-if =" limit < maxAlbumLength"
249
+ <div v-if =" limit < maxAlbumLength"
335
250
class =" cursor-pointer hover:opacity-90 transition-all text-md block w-48 rounded-md bg-verse-600 px-4 py-4 text-center font-medium text-white md:w-64 md:px-8 md:text-xl"
336
- @click =" viewMore()"
337
- >
251
+ @click =" viewMore()" >
338
252
View more
339
253
</div >
340
254
</div >
0 commit comments