usePagination

import { usePagination, ELLIPSIS } from "@/shared/hooks"
interface Post {  id: number  title: string}
export function PostList({ posts }: { posts: Post[] }) {  const {    page,    totalPages,    range,    next,    prev,    setPage,    slice,    hasPrevPage,    hasNextPage,    itemStart,    itemEnd,  } = usePagination<Post>({    totalItems: posts.length,    initialPageSize: 5,    siblings: 1,    boundaries: 1,  })
  const currentPosts = slice(posts)
  return (    <div className="space-y-4">      <div className="text-xs text-muted-foreground">        Showing {itemStart}–{itemEnd} of {posts.length}      </div>
      <ul className="divide-y border rounded-lg">        {currentPosts.map((post) => (          <li key={post.id} className="p-3 text-sm">            {post.title}          </li>        ))}      </ul>
      {/* Pagination Controls */}      <div className="flex items-center gap-1 justify-center">        <button onClick={prev} disabled={!hasPrevPage}>Previous</button>
        {range.map((item, idx) =>          item === ELLIPSIS ? (            <span key={`dots-${idx}`} className="px-2">...</span>          ) : (            <button              key={item}              onClick={() => setPage(item)}              className={item === page ? "font-bold text-primary" : ""}            >              {item}            </button>          )        )}
        <button onClick={next} disabled={!hasNextPage}>Next</button>      </div>    </div>  )}

import { useEffect, useState } from "react"import { usePagination } from "@/shared/hooks"
export function ServerSideTable() {  const [data, setData] = useState([])  const [totalCount, setTotalCount] = useState(0)
  const pagination = usePagination({    totalItems: totalCount,    initialPageSize: 20,    onChange: (newPage, newPageSize) => {      // Re-fetch data on page change      fetchUsers({ page: newPage, limit: newPageSize })    },  })
  return (    <div>      {/* Table displaying server-side data */}      <span>Page {pagination.page} of {pagination.totalPages}</span>    </div>  )}