feat: add pagination to protocol history table

src/app/components/protocol-history-table/protocol-history-table.tsx

@@ -1,4 +1,6 @@
-import { Skeleton, useBreakpointValue } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import { Button, HStack, Skeleton, Spacer, VStack, useBreakpointValue } from '@chakra-ui/react';
 import { GenericTableBody } from '@components/generic-table/components/generic-table-body';
 import { GenericTableHeader } from '@components/generic-table/components/generic-table-header';
 import { GenericTableHeaderText } from '@components/generic-table/components/generic-table-header-text';
@@ -10,11 +12,24 @@
 }
 
 export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): React.JSX.Element {
-  const dynamicHeight = items ? items.length * 59 + 20 : 20;
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
+  const totalPages = Math.ceil((items?.length || 0) / itemsPerPage);
+
+  const currentItems = items?.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+
+  const handlePageChange = (direction: number) => {
+    setCurrentPage(prevPage => {
+      const newPage = prevPage + direction;
+      if (newPage < 1 || newPage > totalPages) return prevPage;
+      return newPage;
+    });
+  };
+
   return (
     <GenericTableLayout height={`${dynamicHeight}px`} width={'70%'} isMobile={isMobile}>
       <GenericTableHeader>
         {isMobile ? (
           <>