Files
blog/src/components/atoms/Pagination.astro
2023-01-02 10:51:51 -05:00

39 lines
999 B
Plaintext

---
import { Icon } from 'astro-icon';
import { getRelativeLink } from '~/utils/permalinks';
export interface Props {
prevUrl: string;
nextUrl: string;
prevText?: string;
nextText?: string;
}
const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
---
{
(prevUrl || nextUrl) && (
<div class="container flex">
<div class="flex flex-row mx-auto container justify-between">
<a
href={getRelativeLink(prevUrl)}
class={`btn btn-ghost px-3 mr-2
${!prevUrl ? 'invisible' : ''}`}
>
<div class="flex flex-row align-middle">
<Icon name="tabler:arrow-left" class="w-6 h-6" />
<p class="ml-2">{prevText}</p>
</div>
</a>
<a href={getRelativeLink(nextUrl)} class={`btn btn-ghost px-3 ${!nextUrl ? 'invisible' : ''}`}>
<div class="flex flex-row align-middle">
<span class="mr-2">{nextText}</span>
<Icon name="tabler:arrow-right" class="w-6 h-6" />
</div>
</a>
</div>
</div>
)
}