mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-04 04:40:51 +04:00
94 lines
2.9 KiB
Plaintext
94 lines
2.9 KiB
Plaintext
---
|
||
import type { Page } from "astro";
|
||
import { Icon } from "astro-icon/components";
|
||
|
||
import { url } from "@utils/url";
|
||
|
||
|
||
interface Props {
|
||
page: Page;
|
||
class?: string;
|
||
style?: string;
|
||
basePath?: string; // Базовый путь для генерации URL (например, "/news" для главной страницы)
|
||
}
|
||
|
||
const { page, style, basePath } = 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;
|
||
let 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 getPageUrl = (p: number) => {
|
||
if (p === 1) {
|
||
// Первая страница всегда на корне
|
||
return "/";
|
||
}
|
||
// Если указан basePath, используем его для всех страниц кроме первой
|
||
if (basePath) {
|
||
return `${basePath}/${p}/`;
|
||
}
|
||
return `/${p}/`;
|
||
};
|
||
---
|
||
|
||
<div class:list={[className, "flex flex-row gap-3 justify-center"]} style={style}>
|
||
<a href={page.url.prev || ""} aria-label={page.url.prev ? "Previous Page" : null}
|
||
class:list={["btn-card overflow-hidden rounded-lg text-(--primary) w-11 h-11",
|
||
{"disabled": page.url.prev == undefined}
|
||
]}
|
||
>
|
||
<Icon name="material-symbols:chevron-left-rounded" class="text-[1.75rem]"></Icon>
|
||
</a>
|
||
<div class="bg-(--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-(--primary) flex items-center justify-center
|
||
font-bold text-white dark:text-black/70"
|
||
>
|
||
{p}
|
||
</div>
|
||
return <a href={url(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-(--primary) w-11 h-11",
|
||
{"disabled": page.url.next == undefined}
|
||
]}
|
||
>
|
||
<Icon name="material-symbols:chevron-right-rounded" class="text-[1.75rem]"></Icon>
|
||
</a>
|
||
</div> |