feat: better page turner

src/app/tools/ratings/page.tsx

@@ -179,34 +179,56 @@ export default function Page() {
     }, [page]);
 
     return (
-      <TextField.Root className={noArrows}>
+      <Flex justify="center" wrap="wrap" gap="2">
-        <TextField.Slot>Page</TextField.Slot>
+        <Button variant="soft" onClick={previousPage}>
-        <TextField.Input
+          <CaretLeftIcon />
-          className={noArrows}
+        </Button>
-          type="number"
+        <TextField.Root className={noArrows}>
-          ref={pageInput}
+          <TextField.Slot>Page</TextField.Slot>
-          style={{ width: 64, textAlign: 'center' }}
+          <TextField.Input
-          onBlur={(event) => {
+            className={noArrows}
-            setPage(
+            type="number"
-              Math.max(
+            ref={pageInput}
-                0,
+            style={{ width: 64, textAlign: 'center' }}
-                Math.min(
+            onBlur={(event) => {
-                  Math.floor((players.data?.length ?? 0) / rowsPerPage),
+              setPage(
-                  event.target.valueAsNumber - 1,
+                Math.max(
+                  0,
+                  Math.min(
+                    Math.floor((players.data?.length ?? 0) / rowsPerPage),
+                    event.target.valueAsNumber - 1,
+                  ),
                 ),
-              ),
+              );
-            );
+            }}
-          }}
+            onKeyDown={(event) => {
-          onKeyDown={(event) => {
+              if (event.key === 'Enter') {
-            if (event.key === 'Enter') {
+                (event.target as HTMLInputElement).blur();
-              (event.target as HTMLInputElement).blur();
+              }
-            }
+            }}
-          }}
+          />
-        />
+          <TextField.Slot>
-        <TextField.Slot>
+            out of {Math.ceil((players.data?.length ?? 0) / rowsPerPage)}
-          out of {Math.ceil((players.data?.length ?? 0) / rowsPerPage)}
+          </TextField.Slot>
-        </TextField.Slot>
+        </TextField.Root>
-      </TextField.Root>
+        <Select.Root
+          onValueChange={(value) => setRowsPerPage(parseInt(value))}
+          defaultValue={`${rowsPerPage}`}
+        >
+          <Select.Trigger />
+
+          <Select.Content>
+            {ROWS_OPTIONS.map((size) => (
+              <Select.Item value={`${size}`} key={size}>
+                {size} per page
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+        <Button variant="soft" onClick={nextPage}>
+          <CaretRightIcon />
+        </Button>
+      </Flex>
     );
   }
 
@@ -260,30 +282,6 @@ export default function Page() {
         </Select.Root>
       </Flex>
 
-      <Flex justify="center" wrap="wrap" gap="2">
-        <Button variant="soft" onClick={previousPage}>
-          <CaretLeftIcon />
-        </Button>
-        <PageTurner />
-        <Select.Root
-          onValueChange={(value) => setRowsPerPage(parseInt(value))}
-          defaultValue={`${rowsPerPage}`}
-        >
-          <Select.Trigger />
-
-          <Select.Content>
-            {ROWS_OPTIONS.map((size) => (
-              <Select.Item value={`${size}`} key={size}>
-                {size} per page
-              </Select.Item>
-            ))}
-          </Select.Content>
-        </Select.Root>
-        <Button variant="soft" onClick={nextPage}>
-          <CaretRightIcon />
-        </Button>
-      </Flex>
-
       <Flex gap="2" justify="center">
         <Dialog.Root
           open={jumpToPositionOpen}
@@ -410,6 +408,8 @@ export default function Page() {
         </Dialog.Root>
       </Flex>
 
+      <PageTurner />
+
       <Leaderboard.Root>
         {players.isLoading ? (
           <Leaderboard.Gap message="Loading players..." />
@@ -430,15 +430,7 @@ export default function Page() {
         )}
       </Leaderboard.Root>
 
-      <Flex justify="center" gap="2">
+      <PageTurner />
-        <Button variant="soft" onClick={previousPage}>
-          <CaretLeftIcon />
-        </Button>
-        <PageTurner />
-        <Button variant="soft" onClick={nextPage}>
-          <CaretRightIcon />
-        </Button>
-      </Flex>
     </PageWrapper>
   );
 }