From 38c2954d2318f75582eda65f12e84a649fc5b16f Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 21 Nov 2020 15:37:35 -0600
Subject: [PATCH] Show relative dates on search list

---
 components/relative-time.vue | 24 ++++++++++++++++++++++++
 components/search.vue        | 17 ++++++++++++++---
 2 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 components/relative-time.vue

diff --git a/components/relative-time.vue b/components/relative-time.vue
new file mode 100644
index 0000000..4fc4f9a
--- /dev/null
+++ b/components/relative-time.vue
@@ -0,0 +1,24 @@
+<template>
+
+    <span>{{ relativeTime }}</span>
+
+</template>
+
+<script>
+import parseGithubDate from '~/helpers/parse-github-date'
+
+export default {
+    props: {
+        timestamp: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        relativeTime () {
+            return parseGithubDate(this.timestamp).relative
+        }
+    }
+}
+
+</script>
diff --git a/components/search.vue b/components/search.vue
index 0ce1171..8070f45 100644
--- a/components/search.vue
+++ b/components/search.vue
@@ -62,16 +62,25 @@
                                     <div class="flex-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker">
                                         {{ app.name.charAt(0) }}
                                     </div>
-                                    <div class="min-w-0 flex-1 px-4 md:mr-48">
+                                    <div class="min-w-0 flex-1 px-4 md:mr-48 space-y-2">
                                         <div class="text-sm leading-5 font-light truncate">
                                             <span v-if="app.endpoint.includes('/game/')">
                                                 🕹
                                             </span>
                                             {{ app.name }}
                                         </div>
-                                        <div class="mt-2 flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
+                                        <div class="flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
                                             {{ app.text }}
                                         </div>
+                                        <!-- app.lastUpdated: {{ app.lastUpdated }} -->
+                                        <client-only
+                                            v-if="app.lastUpdated"
+                                            placeholder="Loading..."
+                                        >
+                                            <small class="text-xs opacity-50">
+                                                <RelativeTime :timestamp="app.lastUpdated.timestamp" />
+                                            </small>
+                                        </client-only>
                                     </div>
                                     <svg
                                         class="h-5 w-5 text-gray-400"
@@ -122,6 +131,7 @@ import scrollIntoView from 'scroll-into-view-if-needed'
 // import appList from '~/app-list.json'
 
 import EmailSubscribe from '~/components/email-subscribe.vue'
+import RelativeTime from '~/components/relative-time.vue'
 
 // import overlayStore from './mixins/store'
 // import modalRouter from '~/components/modals/mixins/router'
@@ -133,7 +143,8 @@ import EmailSubscribe from '~/components/email-subscribe.vue'
 
 export default {
     components: {
-        EmailSubscribe
+        EmailSubscribe,
+        RelativeTime
     },
     props: {
         appList: {