From 62597bd70f2b04578cbc25696f87eaf72151a20f Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Wed, 29 Dec 2021 00:57:21 -0600
Subject: [PATCH] feat: videos showing up in a reasonable list

---
 components/VideoPreview.vue | 31 +++++++++++++++++++++++++++++++
 components/VideosList.vue   | 29 +++++++++++++++++++++++++++++
 nuxt.config.js              |  8 ++++++++
 package-lock.json           | 17 +++++++++++++++++
 package.json                |  1 +
 pages/index.vue             |  6 +-----
 6 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 components/VideoPreview.vue
 create mode 100644 components/VideosList.vue

diff --git a/components/VideoPreview.vue b/components/VideoPreview.vue
new file mode 100644
index 0000000..39f4641
--- /dev/null
+++ b/components/VideoPreview.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div
+      class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden cursor-pointer"
+    >
+      <img
+        :src="video.snippet.thumbnails.high.url"
+        alt=""
+        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">
+      {{ video.snippet.title }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'VideoPreview',
+
+  props: {
+    video: Object,
+  },
+})
+</script>
diff --git a/components/VideosList.vue b/components/VideosList.vue
new file mode 100644
index 0000000..282955b
--- /dev/null
+++ b/components/VideosList.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="bg-white">
+    <div
+      class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8"
+    >
+      <h2 class="sr-only">Videos</h2>
+
+      <div
+        class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
+      >
+        <a v-for="video in videos" :key="video.id" class="group">
+          <VideoPreview :video="video" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'VideoList',
+
+  props: {
+    videos: Array,
+  },
+})
+</script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 925caae..62b84f8 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,3 +1,5 @@
+import tailwindAspectRatio from '@tailwindcss/aspect-ratio'
+
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
@@ -33,6 +35,12 @@ export default {
     '@nuxtjs/tailwindcss',
   ],
 
+  tailwindcss: {
+    config: {
+      plugins: [tailwindAspectRatio],
+    },
+  },
+
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [],
 
diff --git a/package-lock.json b/package-lock.json
index 16d906d..8c8c6b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@nuxtjs/eslint-module": "^3.0.2",
         "@nuxtjs/stylelint-module": "^4.1.0",
         "@nuxtjs/tailwindcss": "^4.2.1",
+        "@tailwindcss/aspect-ratio": "^0.4.0",
         "@types/gapi.youtube": "^3.0.35",
         "@vue/test-utils": "^1.3.0",
         "babel-core": "7.0.0-bridge.0",
@@ -4582,6 +4583,15 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@tailwindcss/aspect-ratio": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.0.tgz",
+      "integrity": "sha512-WJu0I4PpqNPuutpaA9zDUq2JXR+lorZ7PbLcKNLmb6GL9/HLfC7w3CRsMhJF4BbYd/lkY6CfXOvkYpuGnZfkpQ==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -30134,6 +30144,13 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@tailwindcss/aspect-ratio": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.0.tgz",
+      "integrity": "sha512-WJu0I4PpqNPuutpaA9zDUq2JXR+lorZ7PbLcKNLmb6GL9/HLfC7w3CRsMhJF4BbYd/lkY6CfXOvkYpuGnZfkpQ==",
+      "dev": true,
+      "requires": {}
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
diff --git a/package.json b/package.json
index 8e043ce..f9ed9ba 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/stylelint-module": "^4.1.0",
     "@nuxtjs/tailwindcss": "^4.2.1",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
     "@types/gapi.youtube": "^3.0.35",
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
diff --git a/pages/index.vue b/pages/index.vue
index 69605cc..3e65c7d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,11 +6,7 @@
     <main>
       <span>Content</span>
 
-      <ol>
-        <li v-for="video in videos" :key="video.id">
-          {{ video.snippet.title }}
-        </li>
-      </ol>
+      <VideosList :videos="videos" />
     </main>
   </div>
 </template>