From d574d9fd7ce88cd0bf69395bd04c9f554eebddba Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Wed, 27 Apr 2022 19:42:00 -0500
Subject: [PATCH] Add devices to listing template

---
 src/components/default-listing.astro       |  5 ++++
 src/components/listing-parts/devices.astro | 33 ++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/listing-parts/devices.astro

diff --git a/src/components/default-listing.astro b/src/components/default-listing.astro
index bcc31fd..7424d4e 100644
--- a/src/components/default-listing.astro
+++ b/src/components/default-listing.astro
@@ -7,6 +7,7 @@ import {
 
 import Aliases from '~/src/components/listing-parts/aliases.astro'
 import RelatedLinks from '~/src/components/listing-parts/related-links.astro'
+import Devices from '~/src/components/listing-parts/devices.astro'
 import RelatedVideos from '~/src/components/listing-parts/related-videos.astro'
 
 import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
@@ -48,6 +49,10 @@ const details = new ListingDetails( listing )
             />
         </div>
 
+        <Devices
+            listing={ listing }
+        />
+
         <RelatedVideos
             listing={ listing }
         />
diff --git a/src/components/listing-parts/devices.astro b/src/components/listing-parts/devices.astro
new file mode 100644
index 0000000..e7b54fe
--- /dev/null
+++ b/src/components/listing-parts/devices.astro
@@ -0,0 +1,33 @@
+---
+import Heading from './heading.astro'
+
+const {
+  listing
+} = Astro.props
+
+const hasDeviceSupport = Array.isArray( listing.deviceSupport )
+---
+{ hasDeviceSupport && (
+    <div class="device-support w-full">
+
+        <Heading text='Device Support' />
+
+        <div class="device-support-apps md:inline-flex md:w-full max-w-4xl overflow-x-auto overflow-y-visible md:whitespace-no-wrap border rounded-lg divide-y md:divide-y-0 md:divide-x divide-gray-700 space-y-3 md:space-y-0 py-4 px-3">
+
+            { listing.deviceSupport.map( device => (
+                <div class="device-container w-full md:w-auto inline-flex flex-col space-y-2 px-2">
+                    <a
+                        href={ device.endpoint }
+                        role="button"
+                        class="device-link block rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow p-2"
+                        aria-label={ device.ariaLabel }
+                    >{ device.emoji } { device.name }</a>
+
+                    <a href={ device.amazonUrl } target="_blank" class="underline text-xs pb-3" rel="noopener">Check Pricing</a>
+                </div>
+            )) }
+
+        </div>
+
+    </div>
+)}