upd: Added events thumbnails and links

Author: arnabsen1729

components.d.ts

@@ -5,21 +5,21 @@ declare module 'vue' {
   export interface GlobalComponents {
     Brand: typeof import('./src/components/Brand.vue')['default']
     BrandDark: typeof import('./src/components/BrandDark.vue')['default']
+    Calendar: typeof import('./src/components/Calendar.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     README: typeof import('./src/components/README.md')['default']
     Social: typeof import('./src/components/Social.vue')['default']
-    Calendar: typeof import('./src/components/Calendar.vue')['default']
     PopoverButton: typeof import('@headlessui/vue')['PopoverButton']
     PopoverPanel: typeof import('@headlessui/vue')['PopoverPanel']
     Popover: typeof import('@headlessui/vue')['Popover']
     PopoverGroup: typeof import('@headlessui/vue')['PopoverGroup']
     CarbonMoon: typeof import('virtual:vite-icons/carbon/moon')['default']
     CarbonSun: typeof import('virtual:vite-icons/carbon/sun')['default']
-    CarbonLogoFacebook: typeof import('virtual:vite-icons/carbon/logo-facebook')['default']
+    CarbonArrowRight: typeof import('virtual:vite-icons/carbon/arrow-right')['default']
     CarbonLogoYoutube: typeof import('virtual:vite-icons/carbon/logo-youtube')['default']
     CarbonLogoGithub: typeof import('virtual:vite-icons/carbon/logo-github')['default']
     CarbonLogoTwitter: typeof import('virtual:vite-icons/carbon/logo-twitter')['default']
-    CarbonArrowRight: typeof import('virtual:vite-icons/carbon/arrow-right')['default']
+    CarbonLogoFacebook: typeof import('virtual:vite-icons/carbon/logo-facebook')['default']
   }
 }
 

src/pages/events.vue

@@ -10,8 +10,16 @@ useHead({
     },
   ],
 })
-</script>
 
+const events: Array<{link: String; image: String}> = [
+  { link: 'https://www.youtube.com/watch?v=O8zdhpFAW_w', image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625165552/video_to_markdown/images/youtube--O8zdhpFAW_w-c05b58ac6eb4c4700831b2b3070cd403.jpg' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625200008/video_to_markdown/images/youtube--4vosyExcRvY-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=4vosyExcRvY' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625200675/video_to_markdown/images/youtube--uAHySjoHXuE-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=uAHySjoHXuE' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625200767/video_to_markdown/images/youtube--dEz7BYCAxZA-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=dEz7BYCAxZA' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625201123/video_to_markdown/images/youtube--cwRYql9jzXE-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=cwRYql9jzXE' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625201444/video_to_markdown/images/youtube--eWfE27FhHCI-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=eWfE27FhHCI' },
+]
+</script>
 <template>
   <div
     class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24"
@@ -35,8 +43,10 @@ useHead({
         <p class="text-xl text-gray-500 dark:text-gray-300">
           All our past recorded events and sessions are uploaded to our <a class="text-red-400 hover:text-red-600 hover:underline" href="https://www.youtube.com/codeiiest" target="_blank">Youtube Channel</a>.
         </p>
-        <div class="flex justify-center mt-10">
-          <a href="https://www.youtube.com/watch?v=O8zdhpFAW_w"><img src="https://res.cloudinary.com/marcomontalbano/image/upload/v1625165552/video_to_markdown/images/youtube--O8zdhpFAW_w-c05b58ac6eb4c4700831b2b3070cd403.jpg"></a>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2 justify-center mt-10 px-10">
+          <div v-for="event in events" :key="event.link">
+            <a :href="event.link" target="_blank"><img :src="event.image"></a>
+          </div>
         </div>
       </div>
     </div>