kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Pagination component

Browse Source
This commit is contained in:
Stefan Imhoff
2023-04-26 18:30:13 +02:00
parent 97f4d8adb4
commit a32217ad9d
2 changed files with 80 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/Pagination.astro Normal file
View File

@@ -0,0 +1,78 @@
---
import { Sprite } from 'astro-icon';
export interface Props {
previousUrl?: string;
nextUrl?: string;
previousText?: string;
nextText?: string;
}
const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
---
{
previousUrl && (
<a
aria-label={previousText || 'Previous'}
class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-start-[1rem]"
href={previousUrl}
rel="prev"
title={previousText || 'Previous'}
>
<div class="pagination flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-[50%] bg-black/5 outline-none transition-opacity duration-500 ease-in-out group-hover:bg-black/20 group-focus:bg-black/20 dark:bg-white/5 dark:group-hover:bg-white/20 dark:group-focus:bg-white/20">
<Sprite name="ri:arrow-left-s-line" aria-hidden="true" class="h-icon w-icon" />
</div>
</a>
)
}
{
nextUrl && (
<a
aria-label={nextText || 'Next'}
class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-end-[1rem]"
href={nextUrl}
rel="next"
title={nextText || 'Next'}
>
<div class="pagination flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-[50%] bg-black/5 outline-none transition-opacity duration-500 ease-in-out group-hover:bg-black/20 group-focus:bg-black/20 dark:bg-white/5 dark:group-hover:bg-white/20 dark:group-focus:bg-white/20">
<Sprite name="ri:arrow-right-s-line" aria-hidden="true" class="h-icon w-icon" />
</div>
</a>
)
}
<script is:inline>
const body = document.body;
const scrollUp = 'scroll-up';
const scrollDown = 'scroll-down';
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= 0) {
body.classList.remove(scrollUp);
return;
}
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
body.classList.remove(scrollUp);
body.classList.add(scrollDown);
} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
body.classList.remove(scrollDown);
body.classList.add(scrollUp);
}
lastScroll = currentScroll;
});
</script>
<style is:global>
.scroll-up .pagination {
@apply opacity-100;
}
.scroll-down .pagination {
@apply opacity-0;
}
</style>

3
src/components/index.ts
View File

@@ -2,6 +2,7 @@
import DownloadLink from './DownloadLink.astro';
import EmailLink from './EmailLink.astro';
import MoreLink from './MoreLink.astro';
import Pagination from './Pagination.astro';
export * from './AffiliateLink';
export * from './AmazonBook';
@@ -27,4 +28,4 @@ export * from './Title';
export * from './UnorderedList';
export * from './Verse';
export * from './YouTubeVideo';
export { DownloadLink, EmailLink, MoreLink };
export { DownloadLink, EmailLink, MoreLink, Pagination };