feat: add Pagination - WIP

components/providers/AddProviderModal.tsx

@@ -48,7 +48,9 @@ export const AddProviderModal = () => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost">Add Cloud Account</Button>
+        <Button aria-label="Add Cloud Account" variant="ghost">
+          Add Cloud Account
+        </Button>
       </DialogTrigger>
       <DialogContent className="flex flex-col sm:max-w-md md:max-w-4xl">
         <DialogHeader className="mb-6 space-y-3">

components/providers/table/DataTablePagination.tsx

@@ -15,6 +15,7 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({
   table,
 }: DataTablePaginationProps<TData>) {
+  // console.log(table);
   return (
     <div className="flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8">
       <div className="flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">

components/providers/table/DataTableProvider.tsx

@@ -45,7 +45,6 @@ export function DataTableProvider<TData, TValue>({
       sorting,
     },
   });
-
   return (
     <>
       <div className="rounded-md border w-full">

components/ui/index.ts

@@ -1,6 +1,7 @@
 export * from "./alert/Alert";
 export * from "./dialog/Dialog";
 export * from "./header/Header";
+export * from "./pagination/Pagination";
 export * from "./select/Select";
 export * from "./sidebar";
 export * from "./table/StatusBadge";

components/ui/pagination/Pagination.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import React from "react";
+
+interface Props {
+  totalPages: number;
+  currentPage: number;
+  nextPage?: string;
+}
+
+export const Pagination = ({ totalPages, currentPage }: Props) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  // const currentPage = searchParams["page"] ?? "1";
+  const createPageUrl = (pageNumber: number | string) => {
+    const params = new URLSearchParams(searchParams);
+
+    if (pageNumber === "...") return `${pathname}?${params.toString()}`;
+
+    if (+pageNumber <= 0) {
+      return `${pathname}`;
+    }
+    if (+pageNumber > totalPages) {
+      return `${pathname}?${params.toString()}`;
+    }
+    params.set("page", pageNumber.toString());
+    return `${pathname}?${params.toString()}`;
+  };
+
+  console.log(pathname, searchParams, currentPage);
+
+  return (
+    <div className="flex justify-center">
+      <nav aria-label="Page navigation example">
+        <ul className="flex list-style-none">
+          <li className="page-item">
+            <Link
+              className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+              href={createPageUrl(currentPage - 1)}
+              aria-disabled="true"
+            >
+              Previous
+            </Link>
+          </li>
+
+          <li className="page-item">
+            <a
+              className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+              href="#"
+            >
+              1
+            </a>
+          </li>
+
+          <li className="page-item active">
+            <a
+              className="page-link relative block py-1.5 px-3 border-0 bg-blue-600 outline-none transition-all duration-300 rounded text-white hover:text-white hover:bg-blue-600 shadow-md focus:shadow-md"
+              href="#"
+            >
+              2 <span className="visually-hidden"></span>
+            </a>
+          </li>
+
+          <li className="page-item">
+            <a
+              className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+              href="#"
+            >
+              3
+            </a>
+          </li>
+          <li className="page-item">
+            <a
+              className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+              href="#"
+            >
+              ...
+            </a>
+          </li>
+
+          <li className="page-item">
+            <Link
+              className="page-link relative block py-1.5 px-3 border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none"
+              href={"#"}
+            >
+              Next
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+};