From c2cbc11c8b53031c5aabf1b70ca585c3b00576f9 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Wed, 29 Dec 2021 14:44:45 -0600
Subject: [PATCH] feat: working video links

---
 components/VideoPreview.vue | 10 ++++++++--
 components/VideosList.vue   |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/VideoPreview.vue b/components/VideoPreview.vue
index e69b242..9ae499b 100644
--- a/components/VideoPreview.vue
+++ b/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>
diff --git a/components/VideosList.vue b/components/VideosList.vue
index 3a95f74..863e650 100644
--- a/components/VideosList.vue
+++ b/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>