From 3cbccc0a5baf3c189bdfce0f583ef5b64a75640e Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Thu, 10 Dec 2020 23:42:45 -0600
Subject: [PATCH] Use video row for realted videos

---
 pages/tv/_slug.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/pages/tv/_slug.vue b/pages/tv/_slug.vue
index 48b3afb..5ffdb71 100644
--- a/pages/tv/_slug.vue
+++ b/pages/tv/_slug.vue
@@ -31,7 +31,7 @@
                 <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                     Related Apps
                 </h2>
-                <div class="featured-apps overflow-x-auto whitespace-no-wrap py-2 space-x-2">
+                <div class="featured-apps overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
                     <LinkButton
                         v-for="app in featuredApps"
                         :key="app.slug"
@@ -47,16 +47,9 @@
                 <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                     Related Videos
                 </h2>
-                <div class="featured-apps overflow-x-auto whitespace-no-wrap py-2 space-x-2">
-                    <LinkButton
-                        v-for="video in relatedVideos"
-                        :key="video.slug"
-                        :href="video.endpoint"
-                        :class="[
-                            'inline-block text-xs rounded-lg py-1 px-2',
-                        ]"
-                    >{{ video.name }}</LinkButton>
-                </div>
+                <VideoRow
+                    :videos="relatedVideos"
+                />
             </div>
 
             <!-- video: {{ video }} -->
@@ -78,11 +71,13 @@
 <script>
 import LinkButton from '~/components/link-button.vue'
 import EmailSubscribe from '~/components/email-subscribe.vue'
+import VideoRow from '~/components/video/row.vue'
 
 export default {
     components: {
         LinkButton,
-        EmailSubscribe
+        EmailSubscribe,
+        VideoRow
     },
     async asyncData ({ params: { slug } }) {