Added basic pagination to homepage.

assets/components/pagination/pagination.vue

@@ -0,0 +1,112 @@
+<template>
+	<div class="pagination">
+		<template v-if="pageNumber > 1">
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: 1 } }"
+			>&lt;&lt;</router-link>
+
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageNumber - 1 } }"
+			>&lt;</router-link>
+		</template>
+
+		<template v-else>
+			<span class="pagination-page disabled">&lt;&lt;</span>
+			<span class="pagination-page disabled">&lt;</span>
+		</template>
+
+		<router-link
+			v-for="pageX in pageCount"
+			:key="`page-${pageX}`"
+			:to="{ params: { pageNumber: pageX } }"
+			:class="{ active: pageX === pageNumber }"
+			class="pagination-page"
+		> {{ pageX }} </router-link>
+
+		<template v-if="pageNumber < pageCount">
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageNumber + 1 } }"
+			>&gt;</router-link>
+
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageCount } }"
+			>&gt;&gt;</router-link>
+		</template>
+
+		<template v-else>
+			<span class="pagination-page disabled">&gt;</span>
+			<span class="pagination-page disabled">&gt;&gt;</span>
+		</template>
+	</div>
+</template>
+
+<script>
+function pageNumber() {
+	return Number(this.$route.params.pageNumber) || 1;
+}
+
+function pageCount() {
+	return Math.ceil(this.itemsTotal / this.itemsPerPage);
+}
+
+export default {
+	props: {
+		itemsTotal: {
+			type: Number,
+			default: 0,
+		},
+		itemsPerPage: {
+			type: Number,
+			default: 10,
+		},
+	},
+	computed: {
+		pageNumber,
+		pageCount,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.pagination {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.pagination-page {
+	width: 2rem;
+	height: 2rem;
+	display: inline-flex;
+	align-items: center;
+	margin: 0 .5rem 0 0;
+	justify-content: center;
+	color: var(--shadow);
+	font-weight: bold;
+	text-decoration: none;
+
+	&:hover:not(.active, .disabled) {
+		color: var(--text);
+	}
+
+	&.active {
+		color: var(--primary);
+	}
+
+	&.disabled {
+		color: var(--shadow-weak);
+	}
+}
+
+.pagination-top {
+	margin: 0 0 1rem 0;
+}
+
+.pagination-bottom{
+	margin: 1rem 0 0 0;
+}
+</style>