36 lines
956 B
Plaintext
36 lines
956 B
Plaintext
---
|
|
export interface Props {
|
|
defaultPage?: number;
|
|
}
|
|
|
|
const { defaultPage = 1 } = Astro.props;
|
|
---
|
|
|
|
<div class="pagination" data-current={defaultPage}>
|
|
<slot/>
|
|
</div>
|
|
|
|
<script>
|
|
const pagination = document.querySelector('.pagination');
|
|
const numbers = pagination?.querySelectorAll('.pagination-number');
|
|
|
|
numbers?.forEach((el) => {
|
|
if (
|
|
!el.classList.contains('pagination-number__disabled') &&
|
|
el.textContent?.trim() === pagination?.getAttribute('data-current')
|
|
) {
|
|
el.classList.add('pagination-number__selected');
|
|
}
|
|
|
|
el.addEventListener('click', () => {
|
|
if (el.classList.contains('pagination-number__disabled')) return;
|
|
numbers.forEach(n => n.classList.remove('pagination-number__selected'));
|
|
el.classList.add('pagination-number__selected');
|
|
pagination?.setAttribute('data-current', el.textContent?.trim() ?? '');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use './pagination';
|
|
</style> |