You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
3.2 KiB
75 lines
3.2 KiB
import styles from './blog-pagination.module.scss';
|
|
import {useRouter} from "next/router";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface BlogPaginationProps {
|
|
paginator: any;
|
|
}
|
|
|
|
export function BlogPagination({paginator}: BlogPaginationProps) {
|
|
const router = useRouter();
|
|
const {total, pageCount, page} = paginator.pagination;
|
|
const isOnlyOne = pageCount > 0 && pageCount === 1;
|
|
const isEmpty = total === 0;
|
|
const isFirst = page === 1;
|
|
const isLast = page === pageCount;
|
|
const goPrevious = async () => {
|
|
await router.push(`${window.location.origin}${window.location.pathname}?page=${page - 1}`);
|
|
}
|
|
|
|
const goNext = async () => {
|
|
await router.push(`${window.location.origin}${window.location.pathname}?page=${page + 1}`);
|
|
}
|
|
|
|
return (
|
|
<div className={styles['container']}>
|
|
<div className="flex flex-col items-center">
|
|
{isOnlyOne && !isEmpty && (
|
|
<span className="text-sm text-gray-700 dark:text-gray-400">{total} article(s)</span>)}
|
|
{!isOnlyOne && !isEmpty && (<span className="text-sm text-gray-700 dark:text-gray-400">
|
|
Articles <span className="font-semibold text-gray-900 dark:text-white">{page}</span> à <span
|
|
className="font-semibold text-gray-900 dark:text-white">{pageCount}</span> sur un total de <span
|
|
className="font-semibold text-gray-900 dark:text-white">{total}</span>
|
|
</span>)}
|
|
<div className="inline-flex mt-2 xs:mt-0">
|
|
<button
|
|
disabled={isOnlyOne || isFirst || isEmpty}
|
|
onClick={goPrevious}
|
|
className="
|
|
inline-flex items-center px-4 py-2 mr-2 text-sm font-medium rounded
|
|
text-white bg-gray-800
|
|
hover:bg-gray-900
|
|
disabled:bg-gray-500 disabled:hover:bg-gray-500
|
|
dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
|
<svg aria-hidden="true" className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path fillRule="evenodd"
|
|
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
|
|
clipRule="evenodd"></path>
|
|
</svg>
|
|
Prev
|
|
</button>
|
|
<button
|
|
disabled={isOnlyOne || isLast || isEmpty}
|
|
onClick={goNext}
|
|
className="inline-flex items-center px-4 py-2 ml-2 text-sm font-medium rounded
|
|
text-white bg-gray-800
|
|
hover:bg-gray-900
|
|
disabled:bg-gray-500 disabled:hover:bg-gray-500
|
|
dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
|
Next
|
|
<svg aria-hidden="true" className="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path fillRule="evenodd"
|
|
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
|
|
clipRule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BlogPagination;
|