From 95f59c3faf11308fe9139765ed6543da515dad73 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Thu, 30 Dec 2021 11:53:00 -0600
Subject: [PATCH] feat: wip pagination

---
 components/SimplePagination.vue | 67 +++++++++++++++++++++++++++++++++
 components/VideosList.vue       | 24 ++++++------
 pages/index.vue                 |  5 ++-
 3 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 components/SimplePagination.vue

diff --git a/components/SimplePagination.vue b/components/SimplePagination.vue
new file mode 100644
index 0000000..21ca31e
--- /dev/null
+++ b/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>
diff --git a/components/VideosList.vue b/components/VideosList.vue
index 863e650..41de424 100644
--- a/components/VideosList.vue
+++ b/components/VideosList.vue
@@ -1,16 +1,15 @@
 <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"
-    >
-      <h2 class="sr-only">Videos</h2>
+  <div
+    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>
 
-      <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"
-      >
-        <div v-for="video in videos" :key="video.id" class="group">
-          <VideoPreview :video="video" />
-        </div>
+    <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"
+    >
+      <div v-for="video in videos" :key="video.id" class="group">
+        <VideoPreview :video="video" />
       </div>
     </div>
   </div>
@@ -18,6 +17,7 @@
 
 <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
diff --git a/pages/index.vue b/pages/index.vue
index ff194a2..c9fdb25 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,10 @@
     </header>
     <main>
       <IndexHero />
-      <VideosList />
+      <div class="bg-gray-200 pb-12">
+        <VideosList />
+        <SimplePagination />
+      </div>
     </main>
   </div>
 </template>