Adjust design

seesjays · May 18, 2023 · da8ae1a · da8ae1a
1 parent a5077ed
commit da8ae1a
Showing 1 changed file with 9 additions and 21 deletions.
diff --git a/components/paginationControl.tsx b/components/paginationControl.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { memberType } from "../types/types";
-import { AiOutlineArrowLeft, AiOutlineArrowRight } from "react-icons/ai";
+import { HiArrowLeft, HiArrowRight } from "react-icons/hi";
 
 type paginationControlProps = {
   dataPage: number;
@@ -13,38 +13,26 @@ export const PaginationControl = ({
   setDataPage,
   presentableData,
 }: paginationControlProps) => {
-  function decrementDataPage() {
-    if (dataPage === 0) return;
-
-    setDataPage((prev) => prev - 1);
-  }
-
-  function incrementDataPage() {
-    if (dataPage === presentableData.length - 1) return;
-
-    setDataPage((prev) => prev + 1);
-  }
-
   return (
-    <div className="mt-3 flex items-center justify-end">
+    <div className="mt-4 flex items-center justify-end">
       <button
-        className="mr-3 rounded-md p-2 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
-        onClick={decrementDataPage}
+        className="mr-3 rounded-md p-1 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
+        onClick={() => setDataPage((prev) => prev - 1)}
         disabled={dataPage === 0 ? true : false}
       >
-        <AiOutlineArrowLeft className="h-6 w-6" />
+        <HiArrowLeft className="h-6 w-6" />
       </button>
 
-      <p className="flex w-fit justify-center font-medium">
+      <p className="flex w-fit justify-center text-lg font-medium">
         Page {dataPage + 1} of {presentableData.length}
       </p>
 
       <button
-        className="ml-3 rounded-md p-2 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
-        onClick={incrementDataPage}
+        className="ml-3 rounded-md p-1 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
+        onClick={() => setDataPage((prev) => prev + 1)}
         disabled={dataPage === presentableData.length - 1 ? true : false}
       >
-        <AiOutlineArrowRight className="h-6 w-6" />
+        <HiArrowRight className="h-6 w-6" />
       </button>
     </div>
   );