feat:modify button variant and adjust position

DLC-link · Oct 30, 2024 · 26afa1a · 26afa1a
1 parent 3983cba
commit 26afa1a
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -16,22 +16,16 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   const itemsPerPage = 10;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
-  const indexOfLastItem = currentPage * itemsPerPage;
-  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-  const currentItems = items?.slice(indexOfFirstItem, indexOfLastItem);
-
   const totalPages = Math.ceil((items?.length || 0) / itemsPerPage);
 
-  const handleNextPage = () => {
-    if (currentPage < totalPages) {
-      setCurrentPage(prevPage => prevPage + 1);
-    }
-  };
+  const currentItems = items?.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
 
-  const handlePreviousPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(prevPage => prevPage - 1);
-    }
+  const handlePageChange = (direction: number) => {
+    setCurrentPage(prevPage => {
+      const newPage = prevPage + direction;
+      if (newPage < 1 || newPage > totalPages) return prevPage;
+      return newPage;
+    });
   };
 
   return (
@@ -58,11 +52,23 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
           </GenericTableBody>
         </Skeleton>
         <Spacer />
-        <HStack spacing={4}>
-          <Button onClick={handlePreviousPage} isDisabled={currentPage === 1}>
+        <HStack spacing={4} justifyContent={'center'} w={'100%'}>
+          <Button
+            variant={'wallet'}
+            h={'40px'}
+            w={'100px'}
+            onClick={() => handlePageChange(-1)}
+            isDisabled={currentPage === 1}
+          >
             Previous
           </Button>
-          <Button onClick={handleNextPage} isDisabled={currentPage === totalPages}>
+          <Button
+            variant={'wallet'}
+            h={'40px'}
+            w={'100px'}
+            onClick={() => handlePageChange(1)}
+            isDisabled={currentPage === totalPages}
+          >
             Next
           </Button>
         </HStack>