how i can make pagination component like astro blog one

---
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>