From 45857a804b1197e60236640c6b1601df91bacb4b Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 10 Mar 2022 18:15:27 +0100
Subject: [PATCH] feat(ui) - pagination tooltips :)

---
 .../components/ui/Pagination/Pagination.tsx   | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/frontend/app/components/ui/Pagination/Pagination.tsx b/frontend/app/components/ui/Pagination/Pagination.tsx
index 4a8e3f1d5..851b35161 100644
--- a/frontend/app/components/ui/Pagination/Pagination.tsx
+++ b/frontend/app/components/ui/Pagination/Pagination.tsx
@@ -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>
     )
 }