import FaChevronLeft from '@/includes/icons/FaChevronLeft'; import FaChevronRight from '@/includes/icons/FaChevronRight'; const Loader = (props) => { return ( <div className={`bg-gray-200 h-5 rounded shadow-sm animate-pulse ${props.className}`} ></div> ); }; const Paginator = (props) => { let pages; if (props.count) { pages = Math.ceil(props.count / props.limit); } else { pages = 1; } pages = pages > props.pageLimit ? props.pageLimit : pages; const onPrev = () => { if (props.page <= 1) return null; const newPage = (props.page || 1) - 1; props.setPage(newPage); return; }; const onNext = () => { if (props.page >= pages) return null; const newPage = (props.page || 1) + 1; props.setPage(newPage); return; }; const onFirst = () => props.setPage(1); const onLast = () => props.setPage(pages); return ( <div className="bg-white px-2 py-3 flex items-center justify-between border-t md:px-4"> <div className="flex-1 flex items-center justify-between"> <div></div> {props.loading ? ( <Loader /> ) : ( <div> <div className="relative z-0 inline-flex rounded-md" aria-label="Pagination" > <button type="button" disabled={props.page <= 1 || pages === 1} onClick={onFirst} className={`relative inline-flex items-center px-2 ml-1 md:px-3 py-2 text-xs font-medium rounded-md ${ props.page <= 1 ? 'text-gray-500' : 'text-green-400 hover:bg-green-400 hover:text-white' } bg-gray-100`} > First </button> <button type="button" disabled={props.page <= 1 || pages === 1} onClick={onPrev} className={`relative inline-flex items-center px-2 ml-1 md:px-3 py-2 font-medium ${ props.page <= 1 ? 'text-gray-500' : 'text-green-400 hover:text-white hover:bg-green-400' } rounded-md bg-gray-100`} > <FaChevronLeft /> </button> <button type="button" disabled className="relative inline-flex items-center px-2 ml-1 md:px-3 py-2 text-xs font-medium text-gray-500 rounded-md bg-gray-100" > Page {props.page} of {pages} </button> <button type="button" disabled={props.page >= pages || pages === 1} onClick={onNext} className={`relative inline-flex items-center ml-1 px-2 md:px-3 py-2 rounded-md font-medium ${ props.page >= pages ? 'text-gray-500' : 'text-green-400 hover:text-white hover:bg-green-400' } bg-gray-100`} > <FaChevronRight /> </button> <button type="button" disabled={props.page >= pages || pages === 1} onClick={onLast} className={`relative inline-flex items-center px-2 ml-1 md:px-3 py-2 text-xs font-medium rounded-md ${ props.page >= pages ? 'text-gray-500' : 'text-green-400 hover:text-white hover:bg-green-400' } bg-gray-100 `} > Last </button> </div> </div> )} </div> </div> ); }; export default Paginator;