2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00

Improved pagination spacing

refs https://github.com/TryGhost/Product/issues/3822
This commit is contained in:
Djordje Vlaisavljevic 2023-09-08 12:42:04 +01:00
parent 58b5b25c8f
commit 8d1e636ca8

View file

@ -15,10 +15,10 @@ const Pagination: React.FC<PaginationProps> = ({page, limit, total, prevPage, ne
/* If there is less than X items total, where X is the number of items per page that we want to show */
if (total && limit < total) {
return (
<div className={`flex items-center gap-2 text-xs text-grey-700`}>Showing {startIndex}-{endIndex} of {total}
<button type='button' onClick={prevPage}><Icon className={`h-[10px] w-[10px] [&>path]:stroke-[3px] ${!hasPrev ? 'cursor-default opacity-50' : 'cursor-pointer'}`} colorClass="text-green" name='chevron-left' />
<div className={`mt-1 flex items-center gap-2 text-xs text-grey-700`}>Showing {startIndex}-{endIndex} of {total}
<button type='button' onClick={prevPage}><Icon className={`h-[10px] w-[10px] [&>path]:stroke-[3px] ${!hasPrev ? 'cursor-default opacity-50' : 'hover:text-green-700 cursor-pointer'}`} colorClass="text-green" name='chevron-left' />
</button>
<button type="button" onClick={nextPage}><Icon className={`h-[10px] w-[10px] [&>path]:stroke-[3px] ${!hasNext ? 'cursor-default opacity-50' : 'cursor-pointer'}`} colorClass="text-green" name='chevron-right' /></button>
<button type="button" onClick={nextPage}><Icon className={`h-[10px] w-[10px] [&>path]:stroke-[3px] ${!hasNext ? 'cursor-default opacity-50' : 'hover:text-green-700 cursor-pointer'}`} colorClass="text-green" name='chevron-right' /></button>
</div>
);