♻️ Add PaginationFooter component (#1381)

frontend/src/components/Common/PaginationFooter.tsx

@@ -0,0 +1,36 @@
+import { Button, Flex } from "@chakra-ui/react"
+
+type PaginationFooterProps = {
+  hasNextPage?: boolean
+  hasPreviousPage?: boolean
+  onChangePage: (newPage: number) => void
+  page: number
+}
+
+export function PaginationFooter({
+  hasNextPage,
+  hasPreviousPage,
+  onChangePage,
+  page,
+}: PaginationFooterProps) {
+  return (
+    <Flex
+      gap={4}
+      alignItems="center"
+      mt={4}
+      direction="row"
+      justifyContent="flex-end"
+    >
+      <Button
+        onClick={() => onChangePage(page - 1)}
+        isDisabled={!hasPreviousPage || page <= 1}
+      >
+        Previous
+      </Button>
+      <span>Page {page}</span>
+      <Button isDisabled={!hasNextPage} onClick={() => onChangePage(page + 1)}>
+        Next
+      </Button>
+    </Flex>
+  )
+}