add page size input

app/(protected)/admin/users/user-list.tsx

@@ -286,6 +286,8 @@ export default function UsersList({ user }: UrlListProps) {
                 total={Math.ceil(data.total / pageSize)}
                 currentPage={currentPage}
                 setCurrentPage={setCurrentPage}
+                pageSize={pageSize}
+                setPageSize={setPageSize}
               />
             )}
           </Table>

app/(protected)/dashboard/records/record-list.tsx

@@ -336,6 +336,8 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
                 total={Math.ceil(data.total / pageSize)}
                 currentPage={currentPage}
                 setCurrentPage={setCurrentPage}
+                pageSize={pageSize}
+                setPageSize={setPageSize}
               />
             )}
           </Table>

app/(protected)/dashboard/urls/url-list.tsx

@@ -431,6 +431,8 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                 total={Math.ceil(data.total / pageSize)}
                 currentPage={currentPage}
                 setCurrentPage={setCurrentPage}
+                pageSize={pageSize}
+                setPageSize={setPageSize}
               />
             )}
           </Table>

components/email/EmailList.tsx

@@ -308,10 +308,12 @@ export default function EmailList({
       )}
       {data && Math.ceil(data.total / pageSize) > 1 && (
         <PaginationWrapper
-          className="mx-2 my-1 justify-center"
+          className="mx-2 my-1"
           total={Math.ceil(data.total / pageSize)}
           currentPage={currentPage}
           setCurrentPage={setCurrentPage}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
         />
       )}
     </div>

components/email/EmailSidebar.tsx

@@ -543,10 +543,11 @@ export default function EmailSidebar({
       {/* Pagination */}
       {!isCollapsed && data && totalPages > 1 && (
         <PaginationWrapper
-          className="m-0 scale-75 justify-center"
+          className="m-0 scale-75"
           total={totalPages}
           currentPage={currentPage}
           setCurrentPage={setCurrentPage}
+          layout="center"
         />
       )}
 

components/shared/pagination.tsx

@@ -11,30 +11,63 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../ui/pagination";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 
 export function PaginationWrapper({
   className,
   total,
   currentPage,
   setCurrentPage,
+  pageSize = 10,
+  setPageSize,
+  layout = "split",
+  size = "medium",
 }: {
   className?: string;
   total: number;
   currentPage: number;
   setCurrentPage: (page: number) => void;
+  pageSize?: number;
+  setPageSize?: (size: number) => void;
+  layout?: "center" | "left" | "right" | "split";
+  size?: "small" | "medium" | "large";
 }) {
+  // Page size options
+  const pageSizeOptions = [10, 20, 50, 100];
+
+  // Calculate total pages based on pageSize
+  const totalPages = Math.ceil(total / pageSize);
+
   const shouldShowPage = (page: number) => {
-    return page === 1 || page === total || Math.abs(page - currentPage) <= 2;
+    return (
+      page === 1 || page === totalPages || Math.abs(page - currentPage) <= 2
+    );
   };
 
   const shouldShowEllipsis = (page: number, prevPage: number | null) => {
     return prevPage && page - prevPage > 1;
   };
 
+  // Handle page size change
+  const handlePageSizeChange = (value: string) => {
+    if (setPageSize) {
+      const newSize = parseInt(value);
+      setPageSize(newSize);
+      // Reset to first page on size change
+      setCurrentPage(1);
+    }
+  };
+
   const pages: any = [];
   let prevPage: number | null = null;
 
-  for (let page = 1; page <= total; page++) {
+  for (let page = 1; page <= totalPages; page++) {
     if (shouldShowPage(page)) {
       if (shouldShowEllipsis(page, prevPage)) {
         pages.push(<PaginationEllipsis key={`ellipsis-${page}`} />);
@@ -45,6 +78,11 @@ export function PaginationWrapper({
             isActive={page === currentPage}
             href={`#`}
             onClick={() => setCurrentPage(page)}
+            className={cn({
+              "px-2 py-1 text-xs": size === "small",
+              "px-3 py-1.5 text-sm": size === "medium",
+              "px-4 py-2 text-base": size === "large",
+            })}
           >
             {page}
           </PaginationLink>
@@ -54,13 +92,109 @@ export function PaginationWrapper({
     }
   }
 
+  // Determine container classes based on layout
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case "center":
+        return "justify-center gap-4 flex-wrap";
+      case "left":
+        return "justify-start gap-4 flex-wrap";
+      case "right":
+        return "justify-end gap-4 flex-wrap";
+      case "split":
+      default:
+        return "justify-between gap-4";
+    }
+  };
+
+  // Determine size classes for text and elements
+  const getSizeClasses = () => {
+    switch (size) {
+      case "small":
+        return "text-xs";
+      case "large":
+        return "text-base";
+      case "medium":
+      default:
+        return "text-sm";
+    }
+  };
+
+  // Determine select trigger width based on size
+  const getSelectWidth = () => {
+    switch (size) {
+      case "small":
+        return "w-[60px]";
+      case "large":
+        return "w-[80px]";
+      case "medium":
+      default:
+        return "w-[70px]";
+    }
+  };
+
   return (
-    <Pagination className={cn("my-3 justify-end", className)}>
-      <PaginationContent>
+    <Pagination
+      className={cn(
+        "my-3 flex items-center",
+        getLayoutClasses(),
+        getSizeClasses(),
+        className,
+      )}
+    >
+      {setPageSize && (
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground">Show</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={handlePageSizeChange}
+          >
+            <SelectTrigger
+              className={cn(getSelectWidth(), {
+                "h-7": size === "small",
+                "h-9": size === "medium",
+                "h-10": size === "large",
+              })}
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={size.toString()}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span
+            className={cn(
+              "text-nowrap text-muted-foreground",
+              "hidden sm:inline-block",
+            )}
+          >
+            per page
+          </span>
+        </div>
+      )}
+      <PaginationContent
+        className={cn({
+          "gap-1": size === "small",
+          "gap-2": size === "medium",
+          "gap-3": size === "large",
+        })}
+      >
         <PaginationItem>
           <PaginationPrevious
             onClick={() => currentPage > 1 && setCurrentPage(currentPage - 1)}
             href={`#`}
+            className={cn(
+              currentPage === 1 ? "pointer-events-none opacity-50" : "",
+              {
+                "px-2 py-1 text-xs": size === "small",
+                "px-3 py-1.5 text-sm": size === "medium",
+                "px-4 py-2 text-base": size === "large",
+              },
+            )}
           />
         </PaginationItem>
 
@@ -69,9 +203,19 @@ export function PaginationWrapper({
         <PaginationItem>
           <PaginationNext
             onClick={() =>
-              currentPage < total && setCurrentPage(currentPage + 1)
+              currentPage < totalPages && setCurrentPage(currentPage + 1)
             }
             href={`#`}
+            className={cn(
+              currentPage === totalPages
+                ? "pointer-events-none opacity-50"
+                : "",
+              {
+                "px-2 py-1 text-xs": size === "small",
+                "px-3 py-1.5 text-sm": size === "medium",
+                "px-4 py-2 text-base": size === "large",
+              },
+            )}
           />
         </PaginationItem>
       </PaginationContent>