Changed the styling of pagination navigation buttons

gitpod-io · Oct 28, 2022 · 7717c70 · 7717c70
1 parent dab947e
commit 7717c70
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 25 deletions.
diff --git a/components/dashboard/src/Pagination/Pagination.tsx b/components/dashboard/src/Pagination/Pagination.tsx
@@ -5,7 +5,7 @@
  */
 
 import { getPaginationNumbers } from "./getPagination";
-import Arrow from "../components/Arrow";
+import PaginationNavigationButton from "./PaginationNavigationButton";
 
 interface PaginationProps {
     totalNumberOfPages: number;
@@ -40,18 +40,12 @@ function Pagination(props: PaginationProps) {
     return (
         <nav className="mt-16 mb-16">
             <ul className="flex justify-center items-center space-x-4">
-                <li
-                    className={`font-semibold text-gray-300 ${
-                        currentPage === 1
-                            ? "disabled dark:text-gray-500"
-                            : "cursor-pointer dark:text-gray-400 text-gray-500"
-                    }`}
-                >
-                    <span onClick={prevPage}>
-                        <Arrow direction={"left"} />
-                        Previous
-                    </span>
-                </li>
+                <PaginationNavigationButton
+                    isDisabled={currentPage === 1}
+                    onClick={prevPage}
+                    label={"Previous"}
+                    arrowReversed={false}
+                />
                 {calculatedPagination.map((pn, i) => {
                     if (pn === "...") {
                         return <li className={getClassnames(pn)}>&#8230;</li>;
@@ -62,18 +56,12 @@ function Pagination(props: PaginationProps) {
                         </li>
                     );
                 })}
-                <li
-                    className={`font-semibold text-gray-300 ${
-                        currentPage === totalNumberOfPages
-                            ? "disabled dark:text-gray-500"
-                            : "cursor-pointer dark:text-gray-400 text-gray-500"
-                    }`}
-                >
-                    <span onClick={nextPage}>
-                        Next
-                        <Arrow direction={"right"} />
-                    </span>
-                </li>
+                <PaginationNavigationButton
+                    isDisabled={currentPage === totalNumberOfPages}
+                    onClick={nextPage}
+                    label={"Next"}
+                    arrowReversed={true}
+                />
             </ul>
         </nav>
     );

diff --git a/components/dashboard/src/Pagination/PaginationNavigationButton.tsx b/components/dashboard/src/Pagination/PaginationNavigationButton.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import Arrow from "../components/Arrow";
+
+interface PaginationNavigationButtonProps {
+    isDisabled: boolean;
+    label: string;
+    arrowReversed: boolean;
+    onClick: () => void;
+}
+
+function PaginationNavigationButton(props: PaginationNavigationButtonProps) {
+    const activeArrowClass = props.isDisabled
+        ? undefined
+        : "border-gray-500 dark:border-gray-400 group-hover:border-gray-600 dark:group-hover:border-gray-400";
+
+    return (
+        <li
+            className={`font-semibold text-gray-300 ${
+                props.isDisabled ? "disabled dark:text-gray-500" : "cursor-pointer dark:text-gray-400 text-gray-500"
+            }`}
+        >
+            <span onClick={props.onClick}>
+                {props.arrowReversed ? (
+                    <>
+                        {props.label}
+                        <Arrow direction={"right"} customBorderClasses={activeArrowClass} />
+                    </>
+                ) : (
+                    <>
+                        <Arrow direction={"left"} customBorderClasses={activeArrowClass} />
+                        {props.label}
+                    </>
+                )}
+            </span>
+        </li>
+    );
+}
+
+export default PaginationNavigationButton;