92 lines
2.6 KiB
Plaintext
92 lines
2.6 KiB
Plaintext
---
|
|
import type { Page } from "astro";
|
|
import { Icon } from 'astro-icon/components';
|
|
interface Props {
|
|
page: Page;
|
|
class?: string;
|
|
}
|
|
|
|
const {page} = Astro.props;
|
|
|
|
const HIDDEN = -1;
|
|
|
|
const className = Astro.props.class;
|
|
|
|
const ADJ_DIST = 2;
|
|
const VISIBLE = ADJ_DIST * 2 + 1;
|
|
|
|
// for test
|
|
let count = 1;
|
|
let l = page.currentPage, r = page.currentPage;
|
|
while (0 < l - 1 && r + 1 <= page.lastPage && count + 2 <= VISIBLE) {
|
|
count += 2;
|
|
l--;
|
|
r++;
|
|
}
|
|
while (0 < l - 1 && count < VISIBLE) {
|
|
count++;
|
|
l--;
|
|
}
|
|
while (r + 1 <= page.lastPage && count < VISIBLE) {
|
|
count++;
|
|
r++;
|
|
}
|
|
|
|
let pages: number[] = [];
|
|
if (l > 1)
|
|
pages.push(1);
|
|
if (l == 3)
|
|
pages.push(2);
|
|
if (l > 3)
|
|
pages.push(HIDDEN);
|
|
for (let i = l; i <= r; i++)
|
|
pages.push(i);
|
|
if (r < page.lastPage - 2)
|
|
pages.push(HIDDEN);
|
|
if (r == page.lastPage - 2)
|
|
pages.push(page.lastPage - 1);
|
|
if (r < page.lastPage)
|
|
pages.push(page.lastPage);
|
|
|
|
const parts: string[] = page.url.current.split('/');
|
|
const commonUrl: string = parts.slice(0, -1).join('/') + '/';
|
|
|
|
const getPageUrl = (p: number) => {
|
|
if (p == 1)
|
|
return commonUrl;
|
|
return commonUrl + p;
|
|
}
|
|
|
|
---
|
|
|
|
<div class:list={[className, "flex flex-row gap-3 justify-center"]}>
|
|
<a href={page.url.prev} aria-label={page.url.prev ? "Previous Page" : null}
|
|
class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
|
|
{"disabled": page.url.prev == undefined}
|
|
]}
|
|
>
|
|
<Icon name="material-symbols:chevron-left-rounded" size="1.75rem"></Icon>
|
|
</a>
|
|
<div class="bg-[var(--card-bg)] flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold">
|
|
{pages.map((p) => {
|
|
if (p == HIDDEN)
|
|
return <Icon name="material-symbols:more-horiz" class="mx-1"/>;
|
|
if (p == page.currentPage)
|
|
return <div class="h-11 w-11 rounded-lg bg-[var(--primary)] flex items-center justify-center
|
|
font-bold text-white dark:text-black/70"
|
|
>
|
|
{p}
|
|
</div>
|
|
return <a href={getPageUrl(p)} aria-label=`Page ${p}`
|
|
class="btn-card w-11 h-11 rounded-lg overflow-hidden active:scale-[0.85]"
|
|
>{p}</a>
|
|
})}
|
|
</div>
|
|
<a href={page.url.next} aria-label={page.url.next ? "Next Page" : null}
|
|
class:list={["btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11",
|
|
{"disabled": page.url.next == undefined}
|
|
]}
|
|
>
|
|
<Icon name="material-symbols:chevron-right-rounded" size="1.75rem"></Icon>
|
|
</a>
|
|
</div> |