completed paginated Component

apps/hub/app/_components/Table.tsx

@@ -8,7 +8,7 @@ import {
   SortingState,
   flexRender,
 } from '@tanstack/react-table';
-import { ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
+import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
 
 export interface SortableTableProps<TData> {
   data: TData[];
@@ -73,3 +73,44 @@ export default function SortableTable<TData>({
     </div>
   );
 }
+
+export const Pagination = ({
+  page,
+  totalPages,
+  setPage,
+}: {
+  page: number;
+  totalPages: number;
+  setPage: (page: number) => void;
+}) => {
+  if (totalPages === 0) return null;
+  return (
+    <div className="join w-full justify-end">
+      <button
+        className="join-item btn"
+        disabled={page === 0}
+        onClick={() => setPage(page - 1)}
+      >
+        <ArrowLeft size={16} />
+      </button>
+      <select
+        className="select join-item"
+        value={page}
+        onChange={(e) => setPage(Number(e.target.value))}
+      >
+        {Array.from({ length: totalPages }).map((_, i) => (
+          <option key={i} value={i}>
+            {i + 1}
+          </option>
+        ))}
+      </select>
+      <button
+        className="join-item btn"
+        disabled={page === totalPages - 1}
+        onClick={() => page < totalPages && setPage(page + 1)}
+      >
+        <ArrowRight size={16} />
+      </button>
+    </div>
+  );
+};