ListLayoutwithtags pagination

[PxlSyl]

Hi!

I think the ListLayoutWithTags component is a very good idea.

That said, I think it should be improved, in fact, when a tag is selected, it displays the related posts. But what would happen if a tag is included in dozens of posts?

So the solution would be, either: to incorporate a pagination for the tags when they are selected , or to include a loader from a number of posts when the user scrolls down the page.

It's just a suggestion, I'll try to integrate it on my side on the i18n version, but I really think it's something that needs to be improved

[timlrx]

Yes, you could include a pagination component like ListLayout or implement some kind of infinite scrolling. Would be happy to take a look at your solution when you are done, but I don't think it's a critical feature that is really needed unless you are creating tags wth 100+ posts.

[PxlSyl]

Okay thanks, not done yet, will try with pagination (have an idea about how to do it)

P.S: If you want to have a look, I've added formsrpee support for email and contact

[brohvis]

Hey guys! I was just poking around to see if anyone had posted any issues I could help out with or see if there were any updates I could utilize, so excuse my Padawan level GitHub knowledge over here but I was able to add pagination and style it pretty well with the following code.

The included SVG's are from HeroIcons but I tend to cannibalize them right into my code for maximum control. Feel free to use or modify, I'm not quite done with my blog so I haven't added it to the readme just yet. Cheers!

interface PaginationProps {
  totalPages: number
  currentPage: number
}
interface ListLayoutProps {
  posts: CoreContent<Blog>[]
  title: string
  initialDisplayPosts?: CoreContent<Blog>[]
  pagination?: PaginationProps
}

function Pagination({ totalPages, currentPage }: PaginationProps) {
  const pathname = usePathname()
  const basePath = pathname.split('/')[1]
  const prevPage = currentPage - 1 > 0
  const nextPage = currentPage + 1 <= totalPages

  const pageNumbers: number[] = [currentPage]
  // @ts-ignore
  if (currentPage > 1 && prevPage && currentPage - 1 != prevPage) {
    pageNumbers.unshift(currentPage - 1)
  }
  if (nextPage && currentPage + 1 < totalPages) {
    pageNumbers.push(currentPage + 1)
  }

  return (
    <div className="space-y-2 pb-4 pt-2 md:space-y-5">
      <nav aria-label="pagination" className="py-2">
        <ul className="list-style-none flex justify-center">
          {currentPage !== 1 ? (
            <Link href={`/${basePath}/`}>
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                    clipRule="evenodd"
                  />
                  <path
                    fillRule="evenodd"
                    d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                First
              </div>
            </Link>
          ) : (
            <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
              {' '}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                className="h-5 w-5"
              >
                <path
                  fillRule="evenodd"
                  d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                  clipRule="evenodd"
                />
                <path
                  fillRule="evenodd"
                  d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                  clipRule="evenodd"
                />
              </svg>
              First
            </div>
          )}
          {prevPage && (
            <div>
              {currentPage - 1 === 0 ? (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              ) : (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              )}
            </div>
          )}
          {!prevPage && (
            <div>
              {currentPage - 1 === 0 && (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              )}
            </div>
          )}
          {prevPage && (
            <div>
              {currentPage - 1 === 0 ? (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              ) : (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                    {currentPage - 1}
                  </div>
                </Link>
              )}
            </div>
          )}
          <div aria-current={currentPage === currentPage ? 'page' : undefined}>
            <Link href={`${basePath}/page/${currentPage}`}>
              <div
                className={`relative block rounded bg-transparent px-3 py-1.5 text-xs ${'rounded-xl border border-primary-600 bg-neutral-100 font-bold text-primary-600 dark:bg-neutral-800'} transition-all duration-300`}
              >
                {currentPage} {/* Display the current page number */}
              </div>
            </Link>
          </div>

          {nextPage && (
            <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
              <div
                className={`relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white`}
              >
                {currentPage + 1}
              </div>
            </Link>
          )}
          {currentPage !== totalPages ? (
            <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Next
              </div>
            </Link>
          ) : (
            <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Next
              </div>
            </Link>
          )}

          {currentPage !== totalPages ? (
            <Link href={`/${basePath}/page/${totalPages}`}>
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                  <path
                    fillRule="evenodd"
                    d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Last
              </div>
            </Link>
          ) : (
            <Link href={`/${basePath}/page/${totalPages}`}>
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                  <path
                    fillRule="evenodd"
                    d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Last
              </div>
            </Link>
          )}
        </ul>
      </nav>
    </div>
  )
}

export default function ListLayoutWithTags({
  posts,
  title,
  initialDisplayPosts = [],
  pagination,
}: ListLayoutProps) {
  const pathname = usePathname()
  const tagCounts = tagData as Record<string, number>
  const tagKeys = Object.keys(tagCounts)
  const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a])

  const displayPosts = initialDisplayPosts.length > 0 ? initialDisplayPosts : posts

Not sure if this is dependent on the vast changes I've made at this point but my site currently loads ListLayout when I go to All Posts and the pagination loads ListLayoutWithTags when I switch pages, so I added pagination to both layouts and it meets my needs for now. Once I get the design working the way I want to and looking the way I intended I don't tend to go back and clean up my work so I'm sure this could be shortened or written better but I thought I'd share in case anyone can benefit.

[PxlSyl]

Hey guys! I was just poking around to see if anyone had posted any issues I could help out with or see if there were any updates I could utilize, so excuse my Padawan level GitHub knowledge over here but I was able to add pagination and style it pretty well with the following code.

The included SVG's are from HeroIcons but I tend to cannibalize them right into my code for maximum control. Feel free to use or modify, I'm not quite done with my blog so I haven't added it to the readme just yet. Cheers!

interface PaginationProps {
  totalPages: number
  currentPage: number
}
interface ListLayoutProps {
  posts: CoreContent<Blog>[]
  title: string
  initialDisplayPosts?: CoreContent<Blog>[]
  pagination?: PaginationProps
}

function Pagination({ totalPages, currentPage }: PaginationProps) {
  const pathname = usePathname()
  const basePath = pathname.split('/')[1]
  const prevPage = currentPage - 1 > 0
  const nextPage = currentPage + 1 <= totalPages

  const pageNumbers: number[] = [currentPage]
  // @ts-ignore
  if (currentPage > 1 && prevPage && currentPage - 1 != prevPage) {
    pageNumbers.unshift(currentPage - 1)
  }
  if (nextPage && currentPage + 1 < totalPages) {
    pageNumbers.push(currentPage + 1)
  }

  return (
    <div className="space-y-2 pb-4 pt-2 md:space-y-5">
      <nav aria-label="pagination" className="py-2">
        <ul className="list-style-none flex justify-center">
          {currentPage !== 1 ? (
            <Link href={`/${basePath}/`}>
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                    clipRule="evenodd"
                  />
                  <path
                    fillRule="evenodd"
                    d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                First
              </div>
            </Link>
          ) : (
            <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
              {' '}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                className="h-5 w-5"
              >
                <path
                  fillRule="evenodd"
                  d="M10.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L12.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                  clipRule="evenodd"
                />
                <path
                  fillRule="evenodd"
                  d="M4.72 11.47a.75.75 0 0 0 0 1.06l7.5 7.5a.75.75 0 1 0 1.06-1.06L6.31 12l6.97-6.97a.75.75 0 0 0-1.06-1.06l-7.5 7.5Z"
                  clipRule="evenodd"
                />
              </svg>
              First
            </div>
          )}
          {prevPage && (
            <div>
              {currentPage - 1 === 0 ? (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              ) : (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              )}
            </div>
          )}
          {!prevPage && (
            <div>
              {currentPage - 1 === 0 && (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              )}
            </div>
          )}
          {prevPage && (
            <div>
              {currentPage - 1 === 0 ? (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Back
                  </div>
                </Link>
              ) : (
                <Link href={`/${basePath}/page/${currentPage - 1}`}>
                  <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                    {currentPage - 1}
                  </div>
                </Link>
              )}
            </div>
          )}
          <div aria-current={currentPage === currentPage ? 'page' : undefined}>
            <Link href={`${basePath}/page/${currentPage}`}>
              <div
                className={`relative block rounded bg-transparent px-3 py-1.5 text-xs ${'rounded-xl border border-primary-600 bg-neutral-100 font-bold text-primary-600 dark:bg-neutral-800'} transition-all duration-300`}
              >
                {currentPage} {/* Display the current page number */}
              </div>
            </Link>
          </div>

          {nextPage && (
            <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
              <div
                className={`relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white`}
              >
                {currentPage + 1}
              </div>
            </Link>
          )}
          {currentPage !== totalPages ? (
            <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Next
              </div>
            </Link>
          ) : (
            <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Next
              </div>
            </Link>
          )}

          {currentPage !== totalPages ? (
            <Link href={`/${basePath}/page/${totalPages}`}>
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-600 transition-all duration-300 hover:bg-neutral-100 dark:text-white dark:hover:bg-neutral-700 dark:hover:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                  <path
                    fillRule="evenodd"
                    d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Last
              </div>
            </Link>
          ) : (
            <Link href={`/${basePath}/page/${totalPages}`}>
              <div className="relative block rounded bg-transparent px-3 py-1.5 text-xs text-neutral-500 transition-all duration-300">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M13.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L11.69 12 4.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                  <path
                    fillRule="evenodd"
                    d="M19.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06L17.69 12l-6.97-6.97a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
                    clipRule="evenodd"
                  />
                </svg>
                Last
              </div>
            </Link>
          )}
        </ul>
      </nav>
    </div>
  )
}

export default function ListLayoutWithTags({
  posts,
  title,
  initialDisplayPosts = [],
  pagination,
}: ListLayoutProps) {
  const pathname = usePathname()
  const tagCounts = tagData as Record<string, number>
  const tagKeys = Object.keys(tagCounts)
  const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a])

  const displayPosts = initialDisplayPosts.length > 0 ? initialDisplayPosts : posts

Not sure if this is dependent on the vast changes I've made at this point but my site currently loads ListLayout when I go to All Posts and the pagination loads ListLayoutWithTags when I switch pages, so I added pagination to both layouts and it meets my needs for now. Once I get the design working the way I want to and looking the way I intended I don't tend to go back and clean up my work so I'm sure this could be shortened or written better but I thought I'd share in case anyone can benefit.

Hi man, very nice work! I did a very similar thing (almost the same in fact) for my own website. But for my i18n version of this template, I prefer to keep a bit of the original spirit and keep things relatively simple, so I finally put the pagination for the tags in place (adapted to my i18 version of course) I think that a more personalized or more complex component with 1st and last page should rather be set up by the users of the template :)

@timlrx If you want to have a look and implement it, feel free. And if you don't have time, let me know and I'll make a PR!