feat: working video links

components/VideoPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <a :href="url">
     <div
       class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden cursor-pointer"
     >
@@ -15,7 +15,7 @@
     <p class="mt-1 text-lg font-medium text-gray-900">
       {{ video.snippet.title }}
     </p>
-  </div>
+  </a>
 </template>
 
 <script lang="ts">
@@ -33,5 +33,11 @@ export default Vue.extend({
       required: true,
     },
   },
+
+  computed: {
+    url() {
+      return `https://www.youtube.com/watch?v=${this.video.contentDetails.videoId}`
+    },
+  },
 })
 </script>

components/VideosList.vue

@@ -8,9 +8,9 @@
       <div
         class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
       >
-        <a v-for="video in videos" :key="video.id" class="group">
+        <div v-for="video in videos" :key="video.id" class="group">
           <VideoPreview :video="video" />
-        </a>
+        </div>
       </div>
     </div>
   </div>