import { SpaceProps } from "@/utils/type"; import { MAX_ITEMS_PER_PAGE } from "./spaces"; export const Pagination = ({ spaces, page, handleNextPage, handlePrevPage, }: { spaces: SpaceProps[]; page: number; handleNextPage: () => void; handlePrevPage: () => void; }) => { const max_pages = Math.ceil(spaces.length / MAX_ITEMS_PER_PAGE); return ( <footer className="flex justify-between max-w-2xl mx-auto my-auto w-full p-3 sticky items-center bottom-3 bg-white dark:bg-slate-950 dark:border-slate-800 shadow-lg shadow-black/5 border border-zinc-200 rounded-full z-[9999]"> <button disabled={page === 0} className="flex items-center gap-2.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 rounded-full px-3 py-1.5 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:!bg-transparent" onClick={handlePrevPage} > <span className="max-lg:hidden">←</span> <span>Previous</span> </button> <p className="text-gray-500/70"> Page {page + 1} of {max_pages} </p> <button disabled={page === max_pages - 1} className="flex items-center gap-2.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 rounded-full px-3 py-1.5 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:!bg-transparent" onClick={handleNextPage} > <span>Next</span> <span className="max-lg:hidden">→</span> </button> </footer> ); };