57 lines
2.5 KiB
Plaintext
57 lines
2.5 KiB
Plaintext
---
|
|
import {
|
|
libraryPageRoute,
|
|
type LibraryPageSlice
|
|
} from '../utils/library-pagination';
|
|
import type { LibraryLocale } from '../utils/library-catalog';
|
|
import { authorPageRoute } from '../utils/author-archives';
|
|
|
|
interface Props {
|
|
locale: LibraryLocale;
|
|
page: LibraryPageSlice<unknown>;
|
|
authorRoot?: string;
|
|
}
|
|
|
|
const { locale, page, authorRoot } = Astro.props;
|
|
const pageRoute = (number: number) => authorRoot ? authorPageRoute(authorRoot, number) : libraryPageRoute(locale, number);
|
|
const messages = {
|
|
en: { navigation: 'Library pagination', previous: 'Previous', next: 'Next', page: 'Page', current: 'current page' },
|
|
es: { navigation: 'Paginación de la biblioteca', previous: 'Anterior', next: 'Siguiente', page: 'Página', current: 'página actual' },
|
|
ar: { navigation: 'ترقيم صفحات المكتبة', previous: 'السابق', next: 'التالي', page: 'الصفحة', current: 'الصفحة الحالية' }
|
|
}[locale];
|
|
const pages = Array.from({ length: page.totalPages }, (_, index) => index + 1);
|
|
---
|
|
{page.totalPages > 1 && (
|
|
<nav class="library-pagination" aria-label={messages.navigation}>
|
|
<ul>
|
|
{page.previousPage && (
|
|
<li class="library-pagination__previous">
|
|
<a rel="prev" href={pageRoute(page.previousPage)}>{messages.previous}</a>
|
|
</li>
|
|
)}
|
|
{pages.map((number) => (
|
|
<li>
|
|
<a
|
|
href={pageRoute(number)}
|
|
aria-current={number === page.currentPage ? 'page' : undefined}
|
|
aria-label={`${messages.page} ${number}${number === page.currentPage ? `, ${messages.current}` : ''}`}
|
|
>{number}</a>
|
|
</li>
|
|
))}
|
|
{page.nextPage && (
|
|
<li class="library-pagination__next">
|
|
<a rel="next" href={pageRoute(page.nextPage)}>{messages.next}</a>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
|
|
<style>
|
|
.library-pagination { margin-top: 2rem; }
|
|
.library-pagination ul { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; list-style: none; margin: 0; padding: 0; }
|
|
.library-pagination a { align-items: center; border: 2px solid var(--color-primary); border-radius: 4px; color: var(--color-primary); display: inline-flex; font-weight: 700; justify-content: center; min-height: 44px; min-width: 44px; padding: .5rem .75rem; text-decoration: none; }
|
|
.library-pagination a[aria-current="page"] { background: var(--color-primary); color: white; }
|
|
.library-pagination a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
|
|
</style>
|