use MkChannelList

packages/client/src/components/MkChannelList.vue

@@ -3,7 +3,7 @@
 		<template #empty>
 			<div class="_fullinfo">
 				<img
-					src="/static-assets/badges/info.png"
+					src="/static-assets/badges/not-found.png"
 					class="_ghost"
 					:alt="i18n.ts.notFound"
 				/>

packages/client/src/pages/channels.vue

@@ -66,7 +66,7 @@
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim featured">
-						<MkPagination
+						<!-- <MkPagination
 							v-slot="{ items }"
 							:pagination="featuredPagination"
 							:disable-auto-load="true"
@@ -77,23 +77,19 @@
 								class="_gap"
 								:channel="channel"
 							/>
-						</MkPagination>
+						</MkPagination> -->
+						<MkChannelList
+								key="featured"
+								:pagination="featuredPagination"
+							/>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim following">
-						<MkPagination
-							v-slot="{ items }"
-							:pagination="followingPagination"
-							:disable-auto-load="true"
-						>
-							<MkChannelPreview
-								v-for="channel in items"
-								:key="channel.id"
-								class="_gap"
-								:channel="channel"
+						<MkChannelList
+								key="following"
+								:pagination="followingPagination"
 							/>
-						</MkPagination>
 					</div>
 				</swiper-slide>
 				<swiper-slide>
@@ -101,18 +97,10 @@
 						<MkButton class="new" @click="create()"
 							><i class="ph-plus ph-bold ph-lg"></i
 						></MkButton>
-						<MkPagination
-							v-slot="{ items }"
-							:pagination="ownedPagination"
-							:disable-auto-load="true"
-						>
-							<MkChannelPreview
-								v-for="channel in items"
-								:key="channel.id"
-								class="_gap"
-								:channel="channel"
+						<MkChannelList
+								key="owned"
+								:pagination="ownedPagination"
 							/>
-						</MkPagination>
 					</div>
 				</swiper-slide>
 			</swiper>