hippofish/packages/client/src/components/MkChannelList.vue
ThatOneCalculator cd7c10b7eb
refactor: 🍱 use webp for error images instead of avif
Ended up having better compression and wider compatibility
2023-09-25 20:57:14 -07:00

43 lines
928 B
Vue

<template>
<MkPagination :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img
src="/static-assets/badges/not-found.webp"
class="_ghost"
:alt="i18n.ts.notFound"
/>
<div>{{ i18n.ts.notFound }}</div>
</div>
</template>
<template #default="{ items }">
<MkChannelPreview
v-for="item in items"
:key="item.id"
class="_margin"
:channel="extractor(item)"
/>
</template>
</MkPagination>
</template>
<script lang="ts" setup>
import MkChannelPreview from "@/components/MkChannelPreview.vue";
import type { Paging } from "@/components/MkPagination.vue";
import MkPagination from "@/components/MkPagination.vue";
import { i18n } from "@/i18n";
const props = withDefaults(
defineProps<{
pagination: Paging;
noGap?: boolean;
extractor?: (item: any) => any;
}>(),
{
extractor: (item) => item,
},
);
</script>
<style lang="scss" scoped></style>