repod/src/components/Discover/TopList.vue

<template>
	<div>
		<Loading v-if="loading" />
		<ul v-if="!loading" class="tops">
			<li v-for="top in tops" :key="top.link">
				<TopItem :author="top.author"
					:image-url="top.imageUrl"
					:link="top.link"
					:title="top.title" />
			</li>
		</ul>
		<p v-if="!loading" class="caption">
			{{ t('Suggests by fyyd') }}
		</p>
	</div>
</template>

<script>
import Loading from '../Atoms/Loading.vue'
import TopItem from './TopItem.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'TopList',
	components: {
		Loading,
		TopItem,
	},
	data() {
		return {
			tops: [],
			loading: true,
		}
	},
	async mounted() {
		try {
			this.loading = true
			const toplist = await axios.get(generateUrl('/apps/repod/toplist'))
			this.tops = toplist.data
		} catch (e) {
			console.error(e)
			showError(t('Could not fetch tops'))
		} finally {
			this.loading = false
		}
	},
}
</script>

<style scoped>
	div {
		margin: 2rem 0;
	}

	li {
		flex-basis: 15%;
	}

	p {
		font-size: small;
		margin: .5rem;
		text-align: right;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem 5%;
		justify-content: center;
	}
</style>