feat: adopt Mantine 9.6 components (#6758)

packages/ui/src/components/table-pagination.tsx

@@ -5,6 +5,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { PaginationProps } from "@mantine/core";
 import { Pagination } from "@mantine/core";
 
+import { useI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
 interface TablePaginationProps {
@@ -16,6 +17,7 @@ export const TablePagination = ({ total }: TablePaginationProps) => {
   const { replace } = useRouter();
   const pathName = usePathname();
   const searchParams = useSearchParams();
+  const t = useI18n("common.pagination");
   const current = Number(searchParams.get("page")) || 1;
 
   const getItemProps = useCallback(
@@ -48,7 +50,15 @@ export const TablePagination = ({ total }: TablePaginationProps) => {
   );
 
   return (
-    <Pagination total={total} getItemProps={getItemProps} getControlProps={getControlProps} onChange={handleChange} />
+    <Pagination
+      total={total}
+      value={current}
+      layout="responsive"
+      formatLabel={({ page, totalPages }) => t("pageOf", { page, totalPages })}
+      getItemProps={getItemProps}
+      getControlProps={getControlProps}
+      onChange={handleChange}
+    />
   );
 };