gaiety/faetale
gaiety/faetale
1
0
Fork 0
Code Activity

feat: wip pagination

Browse source
This commit is contained in:
Ava Gaiety Wroten 2021-12-30 11:53:00 -06:00
parent e6e08e1f01
commit 95f59c3faf
3 changed files with 83 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
components/SimplePagination.vue Normal file
View file

@ -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>

24
components/VideosList.vue
View file

@ -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

5
pages/index.vue
View file

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