From 2fbd5d0f1c6f9deb0ffa12e32e390fd4d7b5d07e Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Thu, 9 Jun 2022 14:49:59 -0500
Subject: [PATCH] Show related apps on video listings

---
 helpers/listing-page.js            |  4 ++--
 src/components/video-listing.astro | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/helpers/listing-page.js b/helpers/listing-page.js
index 73f0c7c..bb47392 100644
--- a/helpers/listing-page.js
+++ b/helpers/listing-page.js
@@ -128,7 +128,7 @@ export class ListingDetails {
     }
 
     get hasRelatedApps () {
-        return false
+        return Array.isArray( this.api.appLinks ) && this.api.appLinks.length > 0
     }
 
     get hasBenchmarksPage () {
@@ -143,7 +143,7 @@ export class ListingDetails {
 
     get initialVideo () {
         if ( this.type === 'video' ) {
-            return this.api.video
+            return this.api
         }
 
         if ( this.hasRelatedVideos ) {
diff --git a/src/components/video-listing.astro b/src/components/video-listing.astro
index a84b5c0..e20c158 100644
--- a/src/components/video-listing.astro
+++ b/src/components/video-listing.astro
@@ -53,7 +53,22 @@ const details = ensureListingDetails( listing )
         <hr class="w-full">
 
         { details.hasRelatedApps &&
-            <div>{ "featuredAppsHtml/related apps" }</div>
+            <div
+                class="related-apps w-full"
+            >
+                <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
+                    Related Apps
+                </h2>
+                <div class="featured-apps overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
+                    { details.initialVideo.appLinks.map( appLink => (
+                        <a
+                            href={ appLink.endpoint }
+                            role="button"
+                            class="relative items-center leading-5 font-bold text-white border border-transparent focus:outline-none focus:border-indigo-600 neumorphic-shadow-inner bg-darker hover:bg-indigo-400 active:bg-indigo-600 transition duration-150 ease-in-out inline-block text-xs rounded-md px-4 py-2"
+                        >{ appLink.name }</a>
+                    ) ) }
+                </div>
+            </div>
         }
 
         <RelatedVideos