how i can make pagination component like astro blog one
i want to make pagination like astro blog one
https://astro.build/blog/
my pagination component
---
import { Icon } from 'astro-icon/components'
const { length, currentUrl, currentPage, firstUrl, prevUrl, nextUrl, lastUrl } =
Astro.props
const paginationList = Array.from({ length: length }, (_, i) => i + 1)
const isFirstPage = firstUrl === currentUrl
const isLastPage = lastUrl === currentUrl
---
<nav aria-label="Blog pages" class="wtq-pagination">
<a href={firstUrl} class:list={["pagination__link", {"disabled": isFirstPage}]}>
<Icon name="double-arrow" />
</a>
<a href={prevUrl} class:list={["pagination__link", {"disabled": prevUrl}]}>
<Icon name="arrow" />
</a>
{
paginationList.map((num) => (
<a href={`${firstUrl}${num == 1 ? "" : '/'+(num)}`}
class:list={["pagination__link", {"disabled active": currentPage == num }]}>
{num}
</a>
))
}
<a href={nextUrl} class:list={["pagination__link", {"disabled": nextUrl}]} >
<Icon name="arrow" />
</a>
<a href={lastUrl} class:list={["pagination__link", {"disabled": isLastPage}]}>
<Icon name="double-arrow" />
</a>
</nav>
---
import { Icon } from 'astro-icon/components'
const { length, currentUrl, currentPage, firstUrl, prevUrl, nextUrl, lastUrl } =
Astro.props
const paginationList = Array.from({ length: length }, (_, i) => i + 1)
const isFirstPage = firstUrl === currentUrl
const isLastPage = lastUrl === currentUrl
---
<nav aria-label="Blog pages" class="wtq-pagination">
<a href={firstUrl} class:list={["pagination__link", {"disabled": isFirstPage}]}>
<Icon name="double-arrow" />
</a>
<a href={prevUrl} class:list={["pagination__link", {"disabled": prevUrl}]}>
<Icon name="arrow" />
</a>
{
paginationList.map((num) => (
<a href={`${firstUrl}${num == 1 ? "" : '/'+(num)}`}
class:list={["pagination__link", {"disabled active": currentPage == num }]}>
{num}
</a>
))
}
<a href={nextUrl} class:list={["pagination__link", {"disabled": nextUrl}]} >
<Icon name="arrow" />
</a>
<a href={lastUrl} class:list={["pagination__link", {"disabled": isLastPage}]}>
<Icon name="double-arrow" />
</a>
</nav>
0 Replies