jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - pagination tooltips :)

Browse source
This commit is contained in:
Shekar Siri 2022-03-10 18:15:27 +01:00
parent 3ddda04e78
commit 45857a804b
1 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
frontend/app/components/ui/Pagination/Pagination.tsx
View file

@ -2,6 +2,7 @@ import React from 'react'
import { Icon } from 'UI'
import cn from 'classnames'
import { debounce } from 'App/utils';
import { Tooltip } from 'react-tippy';
interface Props {
page: number
totalPages: number
@ -29,13 +30,21 @@ export default function Pagination(props: Props) {
const isLastPage = currentPage === totalPages;
return (
<div className="flex items-center">
<button
className={cn("py-2 px-3", { "opacity-50 cursor-default": isFirstPage })}
disabled={isFirstPage}
onClick={() => changePage(currentPage - 1)}
<Tooltip
arrow
sticky
title="Previous Page"
trigger="mouseenter"
hideOnClick={true}
>
<Icon name="chevron-left" size="18" color={isFirstPage ? 'gray-medium' : 'teal'} />
</button>
<button
className={cn("py-2 px-3", { "opacity-50 cursor-default": isFirstPage })}
disabled={isFirstPage}
onClick={() => changePage(currentPage - 1)}
>
<Icon name="chevron-left" size="18" color={isFirstPage ? 'gray-medium' : 'teal'} />
</button>
</Tooltip>
<span className="mr-2 color-gray-medium">Page</span>
<input
type="number"
@ -47,13 +56,21 @@ export default function Pagination(props: Props) {
/>
<span className="mx-3 color-gray-medium">of</span>
<span >{totalPages}</span>
<button
className={cn("py-2 px-3", { "opacity-50 cursor-default": isLastPage })}
disabled={isLastPage}
onClick={() => changePage(currentPage + 1)}
<Tooltip
arrow
sticky
title="Next Page"
trigger="mouseenter"
hideOnClick={true}
>
<Icon name="chevron-right" size="18" color={isLastPage ? 'gray-medium' : 'teal'} />
</button>
<button
className={cn("py-2 px-3", { "opacity-50 cursor-default": isLastPage })}
disabled={isLastPage}
onClick={() => changePage(currentPage + 1)}
>
<Icon name="chevron-right" size="18" color={isLastPage ? 'gray-medium' : 'teal'} />
</button>
</Tooltip>
</div>
)
}