Add pagination

.gitignore

@@ -2,7 +2,7 @@ __debug_bin*
 vendor
 pb_data
 main
-certimate
+./certimate
 build
 /docker/data
 

ui/src/components/certimate/Pagination.tsx

@@ -0,0 +1,90 @@
+import { Button } from "../ui/button";
+
+type PaginationProps = {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+};
+
+type PageNumber = number | string;
+
+const Pagination = ({
+  totalPages,
+  currentPage,
+  onPageChange,
+}: PaginationProps) => {
+  const pageNeighbours = 2; // Number of page numbers to show on either side of the current page
+
+  const getPageNumbers = () => {
+    const totalNumbers = pageNeighbours * 2 + 3; // total pages to display (left + right neighbours + current + 2 for start and end)
+    const totalBlocks = totalNumbers + 2; // adding 2 for the start and end page numbers
+
+    if (totalPages > totalBlocks) {
+      let pages: PageNumber[] = [];
+
+      const leftBound = Math.max(2, currentPage - pageNeighbours);
+      const rightBound = Math.min(totalPages - 1, currentPage + pageNeighbours);
+
+      const beforeLastPage = totalPages - 1;
+
+      pages = range(leftBound, rightBound);
+
+      if (currentPage > pageNeighbours + 2) {
+        pages.unshift("...");
+      }
+      if (currentPage < beforeLastPage - pageNeighbours) {
+        pages.push("...");
+      }
+
+      pages.unshift(1);
+      pages.push(totalPages);
+
+      return pages;
+    }
+
+    return range(1, totalPages);
+  };
+
+  const range = (from: number, to: number, step = 1) => {
+    let i = from;
+    const range = [];
+
+    while (i <= to) {
+      range.push(i);
+      i += step;
+    }
+
+    return range;
+  };
+
+  const pages = getPageNumbers();
+
+  return (
+    <div className="pagination dark:text-stone-200">
+      {pages.map((page, index) => {
+        if (page === "...") {
+          return (
+            <span key={index} className="pagination-ellipsis">
+              &hellip;
+            </span>
+          );
+        }
+
+        return (
+          <Button
+            key={index}
+            className={`pagination-button ${
+              currentPage === page ? "active" : ""
+            }`}
+            variant={currentPage === page ? "default" : "outline"}
+            onClick={() => onPageChange(page as number)}
+          >
+            {page}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Pagination;

ui/src/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>上一页</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>下一页</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

ui/src/pages/domains/Home.tsx

@@ -1,4 +1,5 @@
 import DeployProgress from "@/components/certimate/DeployProgress";
+import Pagination from "@/components/certimate/Pagination";
 import Show from "@/components/Show";
 import {
   AlertDialogAction,
@@ -323,6 +324,14 @@ const Home = () => {
                 </div>
               </div>
             ))}
+
+            <Pagination
+              totalPages={1000}
+              currentPage={3}
+              onPageChange={(page) => {
+                console.log(page);
+              }}
+            />
           </>
         )}
       </div>