AstralRinth/packages/ui/src/components/base/Pagination.vue

<template>
	<div v-if="count > 1" class="flex items-center gap-1">
		<ButtonStyled v-if="page > 1" circular type="transparent">
			<a
				v-if="linkFunction"
				aria-label="Previous Page"
				:href="linkFunction(page - 1)"
				@click.prevent="switchPage(page - 1)"
			>
				<ChevronLeftIcon />
			</a>
			<button v-else aria-label="Previous Page" @click="switchPage(page - 1)">
				<ChevronLeftIcon />
			</button>
		</ButtonStyled>
		<div
			v-for="(item, index) in pages"
			:key="'page-' + item + '-' + index"
			:class="{
				'page-number': page !== item,
				shrink: item !== '-' && item > 99,
			}"
			class="page-number-container"
		>
			<div v-if="item === '-'" class="rotate-90 grid place-content-center">
				<EllipsisVerticalIcon />
			</div>
			<ButtonStyled
				v-else
				circular
				:color="page === item ? 'brand' : 'standard'"
				:type="page === item ? 'highlight' : 'transparent'"
			>
				<a
					v-if="linkFunction"
					:href="linkFunction(item)"
					:class="page === item ? '!text-brand' : ''"
					@click.prevent="page !== item ? switchPage(item) : null"
				>
					{{ item }}
				</a>
				<button
					v-else
					:class="page === item ? '!text-brand' : ''"
					@click="page !== item ? switchPage(item) : null"
				>
					{{ item }}
				</button>
			</ButtonStyled>
		</div>

		<ButtonStyled v-if="page !== pages[pages.length - 1]" circular type="transparent">
			<a
				v-if="linkFunction"
				aria-label="Next Page"
				:href="linkFunction(page + 1)"
				@click.prevent="switchPage(page + 1)"
			>
				<ChevronRightIcon />
			</a>
			<button v-else aria-label="Next Page" @click="switchPage(page + 1)">
				<ChevronRightIcon />
			</button>
		</ButtonStyled>
	</div>
</template>
<script setup lang="ts">
import { ChevronLeftIcon, ChevronRightIcon, EllipsisVerticalIcon } from '@modrinth/assets'
import { computed } from 'vue'

import ButtonStyled from './ButtonStyled.vue'

const emit = defineEmits<{
	'switch-page': [page: number]
}>()

const props = withDefaults(
	defineProps<{
		page: number
		count: number
		linkFunction?: (page: number) => string | undefined
	}>(),
	{
		page: 1,
		count: 1,
		linkFunction: (page: number) => void page,
	},
)

const pages = computed(() => {
	const pages: ('-' | number)[] = []

	const first = 1
	const last = props.count
	const current = props.page
	const prev = current - 1
	const next = current + 1
	const gap = '-'

	if (prev > first) {
		pages.push(first)
	}
	if (prev > first + 1) {
		pages.push(gap)
	}
	if (prev >= first) {
		pages.push(prev)
	}
	pages.push(current)
	if (next <= last) {
		pages.push(next)
	}
	if (next < last - 1) {
		pages.push(gap)
	}
	if (next < last) {
		pages.push(last)
	}

	return pages
})

function switchPage(newPage: number) {
	emit('switch-page', Math.min(Math.max(newPage, 1), props.count))
}
</script>