Pagination Array/NextJs/Stitches

pagination.js

import { Pagination, ItemPagination } from './style'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { styled } from 'stitches'

const Pagination = styled('div', {
  display: 'flex',
  justifyContent: 'end'
})

const ItemPagination = styled('button', {
  display: 'grid',
  placeItems: 'center',
  border: '1px solid #C4C4C4',
  width: '30px',
  height: '30px',
  fontSize: '20px',
  textAlign: 'center',
  marginRight: '10px',
  borderRadius: '4px',
  fontWeight: 'bold',

  variants: {
    disabled: {
      true: {
        backgroundColor: '#C4C4C4',
        color: '#788086',
        display: 'none',
        pointerEvents: 'none'
      }
    },
    active: {
      true: {
        backgroundColor: 'black',
        color: 'white',
        border: '1px solid black'
      }
    }
  }
})

export default ({ params, divisor }) => {
  const router = useRouter()
  const { page } =
    Object.keys(router.query).length === 0 ? { page: 1 } : router.query

  const [pageActive, setPageActive] = useState(0)

  const NumberItem = () => {
    return Math.ceil(params / divisor)
  }

  const verify = () => {
    return NumberItem() === 1 ? true : null
  }

  const route = value => {
    setPageActive(value)
    router.push(`?page=${value}`)
  }

  const itemsPagination = items => {
    return (
      <Pagination>
        <ItemPagination
          onClick={() => route(page - 1)}
          disabled={parseInt(page) === 1}
        >
          {'<'}
        </ItemPagination>
        {items.map(item => item)}
        <ItemPagination
          onClick={() => route(parseInt(page) + 1)}
          disabled={parseInt(page) === items[items.length - 1]?.props.value}
        >
          {'>'}
        </ItemPagination>
      </Pagination>
    )
  }

  const pagination = (c, m) => {
    const current = c
    const last = m
    const delta = 1
    const left = current - delta
    const right = current + delta + 2
    const range = []
    const rangeWithDots = []
    let l

    for (let i = 1; i <= last; i++) {
      if (i === 1 || i === last || (i >= left && i < right)) {
        range.push(i)
      }
    }

    for (const i of range) {
      if (l) {
        if (i - l === 2) {
          rangeWithDots.push(
            <ItemPagination
              onClick={e => route(e.target.value)}
              active={parseInt(page) === l + 1}
              value={l + 1}
            >
              {l + 1}
            </ItemPagination>
          )
        } else if (i - l !== 1) {
          rangeWithDots.push(<ItemPagination>{'...'}</ItemPagination>)
        }
      }
      rangeWithDots.push(
        <ItemPagination
          onClick={e => route(e.target.value)}
          active={parseInt(page) === i}
          value={i}
        >
          {i}
        </ItemPagination>
      )
      l = i
    }

    return rangeWithDots
  }

  const organization = () => {
    const items = []
    for (let i = 1; i <= NumberItem(); i++) items[i] = i

    const selected = []
    for (let i = 0; i <= items.length; i++)
      selected[i] = pagination(i, items.length - 1)

    return itemsPagination(selected[pageActive])
  }

  return verify() ?? <div>{organization()}</div>
}