Simple paginator for Svelte

Paginator.svelte

<script lang="ts">
    import PageLink from "./PageLink.svelte";

    export let pages: number;
    export let current: number;
    export let query: string | undefined;
</script>

{#if pages > 1}
    {#if pages < 20}
        {#each Array(pages) as _, i}
            <PageLink {current} {i} {query} />
        {/each}
    {:else}
        <PageLink {current} i={0} {query} />
        {#if current > 3}...{/if}
        {#each Array(5) as _, i}
            {@const j = current - 2 + i}
            {#if j >= 1 && j <= pages - 2}
                <PageLink {current} i={j} {query} />
            {/if}
        {/each}
        {#if current < pages - 4}...{/if}
        <PageLink {current} i={pages - 1} {query} />
    {/if}
{/if}

PaginatorLink.svelte

<script lang="ts">
    export let current: number;
    export let i: number;
    export let query: string | undefined;

    if (query) query = "&"+ query;
</script>

<a href="?page={i}{query}" class:current={i === current}>{i + 1}</a>

<style>
    a {
        padding: 0.2rem;
        font-weight: normal;
    }
    a:first-child {
        margin-left: 0.5rem;
    }
    a.current {
        font-weight: bold;
        background-color: #eee;
        pointer-events: none;
        text-decoration: none;
    }
</style>