first commit

common/resources/client/ui/font-selector/font-selector-pagination.tsx

@@ -0,0 +1,50 @@
+import {Trans} from '@common/i18n/trans';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {KeyboardArrowLeftIcon} from '@common/icons/material/KeyboardArrowLeft';
+import {KeyboardArrowRightIcon} from '@common/icons/material/KeyboardArrowRight';
+import React from 'react';
+import {FontSelectorState} from '@common/ui/font-selector/font-selector-state';
+
+interface FontSelectorPaginationProps {
+  state: FontSelectorState;
+}
+export function FontSelectorPagination({
+  state: {currentPage = 0, setCurrentPage, filteredFonts, pages},
+}: FontSelectorPaginationProps) {
+  const total = filteredFonts?.length || 0;
+
+  return (
+    <div className="flex items-center justify-end gap-24 text-sm mt-30 pt-14 border-t">
+      {total > 0 && (
+        <div>
+          <Trans
+            message=":from - :to of :total"
+            values={{
+              from: currentPage * 20 + 1,
+              to: Math.min((currentPage + 1) * 20, total),
+              total,
+            }}
+          />
+        </div>
+      )}
+      <div className="text-muted">
+        <IconButton
+          disabled={currentPage < 1}
+          onClick={() => {
+            setCurrentPage(Math.max(0, currentPage - 1));
+          }}
+        >
+          <KeyboardArrowLeftIcon />
+        </IconButton>
+        <IconButton
+          disabled={currentPage >= pages.length - 1}
+          onClick={() => {
+            setCurrentPage(currentPage + 1);
+          }}
+        >
+          <KeyboardArrowRightIcon />
+        </IconButton>
+      </div>
+    </div>
+  );
+}