feat: wip pagination

components/SimplePagination.vue

@@ -0,0 +1,67 @@
+<template>
+  <nav
+    class="border-t border-gray-200 flex items-center justify-between max-w-2xl mx-auto p-4 sm:px-6 lg:max-w-7xl"
+  >
+    <div class="-mt-px w-0 flex-1 flex">
+      <a
+        href="#"
+        class="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
+      >
+        Previous
+      </a>
+    </div>
+    <div class="hidden md:-mt-px md:flex">
+      <a
+        href="#"
+        class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
+      >
+        1
+      </a>
+      <!-- Current: "border-pink-500 text-pink-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
+      <a
+        href="#"
+        class="border-brandlight text-brandlight border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
+        aria-current="page"
+      >
+        2
+      </a>
+      <a
+        href="#"
+        class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
+      >
+        3
+      </a>
+      <span
+        class="border-transparent text-gray-500 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
+      >
+        ...
+      </span>
+      <a
+        href="#"
+        class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
+      >
+        8
+      </a>
+      <a
+        href="#"
+        class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
+      >
+        9
+      </a>
+      <a
+        href="#"
+        class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
+      >
+        10
+      </a>
+    </div>
+    <div class="-mt-px w-0 flex-1 flex justify-end">
+      <a
+        href="#"
+        class="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
+      >
+        Next
+      </a>
+    </div>
+  </nav>
+</template>

components/VideosList.vue

@@ -1,7 +1,7 @@
 <template>
-  <div id="videolist" class="bg-gray-200">
   <div
-      class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8"
+    id="videolist"
+    class="max-w-2xl mx-auto py-8 px-4 sm:px-6 lg:max-w-7xl lg:px-8"
   >
     <h2 class="sr-only">Videos</h2>
 
@@ -13,11 +13,11 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+const maxResults: number = 2
 
 export default Vue.extend({
   name: 'VideoList',
@@ -35,7 +35,7 @@ export default Vue.extend({
   async fetch() {
     try {
       const response = await fetch(
-        `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
+        `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=${maxResults}&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
       )
       const json = await response.json()
       this.videos = json.items

pages/index.vue

@@ -5,7 +5,10 @@
     </header>
     <main>
       <IndexHero />
+      <div class="bg-gray-200 pb-12">
         <VideosList />
+        <SimplePagination />
+      </div>
     </main>
   </div>
 </template>