feat: published dates fixed

components/VideoPreview.vue

@@ -1,7 +1,7 @@
 <template>
   <a :href="url">
     <div
-      class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden cursor-pointer"
+      class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden"
     >
       <img
         :src="video.snippet.thumbnails.high.url"
@@ -9,17 +9,21 @@
         class="w-full h-full object-center object-cover group-hover:opacity-75"
       />
     </div>
-    <h3 class="mt-4 text-sm text-gray-700">
-      {{ video.snippet.publishedAt }}
-    </h3>
-    <p class="mt-1 text-lg font-medium text-gray-900">
+    <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-700">
+      {{ publishedHuman }}
+    </time>
+    <h3 class="mt-1 text-lg font-medium text-gray-900">
       {{ video.snippet.title }}
-    </p>
+    </h3>
   </a>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import dayjs from 'dayjs'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+
+dayjs.extend(localizedFormat)
 
 export default Vue.extend({
   name: 'VideoPreview',
@@ -38,6 +42,12 @@ export default Vue.extend({
     url() {
       return `https://www.youtube.com/watch?v=${this.video.contentDetails.videoId}`
     },
+    publishedHuman() {
+      return dayjs(this.video.snippet.publishedAt).format('L')
+    },
+    publishedDatetime() {
+      return dayjs(this.video.snippet.publishedAt).format('YYYY-MM-DD')
+    },
   },
 })
 </script>