From 6448e414c0cae3caf1d47ea3e9f2f5b48a9537c8 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Fri, 6 May 2022 15:16:28 -0500
Subject: [PATCH] Add timestamps component

---
 src/components/video/timestamps.astro | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/video/timestamps.astro

diff --git a/src/components/video/timestamps.astro b/src/components/video/timestamps.astro
new file mode 100644
index 0000000..0511e4b
--- /dev/null
+++ b/src/components/video/timestamps.astro
@@ -0,0 +1,26 @@
+---
+const {
+    video
+} = Astro.props
+
+const hasTimeStamps = video.timestamps.length > 0
+
+---
+{ hasTimeStamps &&
+    <div class="player-timestamps w-full max-w-4xl">
+        <div class="player-timestamps-wrapper md:inline-flex md:w-full max-w-4xl overflow-x-auto overflow-y-visible md:whitespace-nowrap rounded-xl py-3">
+            { video.timestamps.map( timestamp => {
+                // const inSeconds = (minutes * 60) + Number(seconds)
+                return (
+                     <button
+                        time={ timestamp.time }
+                        aria-label={`Jump to ${ timestamp.fullText }`}
+                        class="inline-block text-xs rounded-lg border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner px-3 py-2"
+                    >
+                        { timestamp.fullText }
+                    </button>
+                )
+            })}
+        </div>
+    </div>
+}