Update Airport admin page

ui/src/components/AirportTable/index.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import cx from 'clsx';
+import { Center, Pagination, ScrollArea, Table } from '@mantine/core';
+import classes from './AirportTable.module.css';
+import { getAirports } from '@lib/airport.ts';
+import { Airport } from '@lib/airport.types.ts';
+
+export function AirportTable() {
+  const [data, setData] = useState<Airport[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const limit = 1000;
+    getAirports({ page, limit }).then(r => {
+      setData(r.data);
+      setTotalPages(r.total / r.data.length);
+    });
+  },[page]);
+
+  const rows = data.map((row, idx) => (
+    <Table.Tr key={idx}>
+      <Table.Td>{row.name}</Table.Td>
+      <Table.Td>{row.icao}</Table.Td>
+      <Table.Td>{row.latitude}</Table.Td>
+      <Table.Td>{row.longitude}</Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <>
+      <ScrollArea h={300} onScrollPositionChange={({ y }) => setScrolled(y !== 0)}>
+        <Table miw={700}>
+          <Table.Thead className={cx(classes.header, { [classes.scrolled]: scrolled })}>
+            <Table.Tr>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>ICAO</Table.Th>
+              <Table.Th>Latitude</Table.Th>
+              <Table.Th>Longitude</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </ScrollArea>
+      <Center mt="sm">
+        <Pagination
+          value={page}
+          onChange={setPage}
+          total={totalPages}
+          siblings={1}
+          boundaries={1}
+        />
+      </Center>
+    </>
+  );
+}