70 lines
1.7 KiB
Svelte
70 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
|
|
import type { Post } from '$lib/types'
|
|
import PostHeader from './PostHeader.svelte';
|
|
|
|
export let posts: Post[];
|
|
// The page navigation bar will not show if these numbers are not provided.
|
|
export let maxPageN: number = 0;
|
|
export let pageN: number = 0;
|
|
|
|
const disableLinkPrev = pageN == 1;
|
|
const disableLinkNext = pageN == maxPageN;
|
|
const firstPageLink = "/post";
|
|
const prevLink = pageN <= 2 ? firstPageLink : `/page/${pageN - 1}`;
|
|
</script>
|
|
|
|
<ul id="catalog" class="content">
|
|
{#each posts as post}
|
|
<li>
|
|
<PostHeader {post}/>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
<!-- Navigation bar -->
|
|
{#if maxPageN}
|
|
<hr class="separator" />
|
|
<div id="page-navigator">
|
|
<a
|
|
aria-label="First Page"
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkPrev}
|
|
href={firstPageLink}><DoubleArrowLeft /></a>
|
|
<a
|
|
aria-label="Prev Page"
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkPrev}
|
|
href={prevLink}><ChevronLeft /></a>
|
|
<div id="page-map">
|
|
<p id="page-num">{pageN}/{maxPageN}</p>
|
|
</div>
|
|
<a
|
|
aria-label="Next Page"
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkNext}
|
|
href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
|
|
<a
|
|
aria-label="Last Page"
|
|
class="nav-link icon"
|
|
class:disabled-link={disableLinkNext}
|
|
href="/page/{maxPageN}"><DoubleArrowRight /></a>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
#page-navigator {
|
|
display: flex;
|
|
flex-direction: horizontal;
|
|
justify-content: space-between;
|
|
margin: 1em auto 1em auto;
|
|
width: 80%;
|
|
align-items: center;
|
|
}
|
|
#page-map {
|
|
display: inline-block;
|
|
}
|
|
#page-num {
|
|
color: rgb(128,128,128);
|
|
}
|
|
</style>
|