From ba0bf7785ab3d30ff636618a9994b2411a8e77d9 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 9 Sep 2022 15:47:53 -0700
Subject: [PATCH] Add swiper to pages

---
 packages/client/src/pages/pages.vue | 53 +++++++++++++++++++----------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 02b05c57b..e3218592d 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -2,40 +2,57 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
-		<div v-if="tab === 'featured'" class="rknalgpo">
-			<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
-				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-			</MkPagination>
-		</div>
-
-		<div v-else-if="tab === 'my'" class="rknalgpo my">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-			<MkPagination v-slot="{items}" :pagination="myPagesPagination">
-				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-			</MkPagination>
-		</div>
-
-		<div v-else-if="tab === 'liked'" class="rknalgpo">
-			<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
-				<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
-			</MkPagination>
-		</div>
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
+				<div class="rknalgpo">
+					<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
+						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+					</MkPagination>
+				</div>
+			</swiper-slide>
+			<swiper-slide>
+				<div class="rknalgpo my">
+					<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+					<MkPagination v-slot="{items}" :pagination="myPagesPagination">
+						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+					</MkPagination>
+				</div>
+			</swiper-slide>
+			<swiper-slide>
+				<div class="rknalgpo">
+					<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
+						<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
+					</MkPagination>
+				</div>
+			</swiper-slide>
+		</swiper>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
+import Virtual from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import { useRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const router = useRouter();
 
 let tab = $ref('featured');
+const tabs = ['featured', 'my', 'liked'];
 
 const featuredPagesPagination = {
 	endpoint: 'pages/featured' as const,