simple event list and fix tables on settings

apps/web/src/components/Pagination.tsx

@@ -0,0 +1,40 @@
+import { useMemo, useState } from "react";
+import { Button } from "./ui/button";
+
+export function usePagination(take = 100) {
+  const [skip, setSkip] = useState(0);
+  return useMemo(
+    () => ({
+      skip,
+      next: () => setSkip((p) => p + take),
+      prev: () => setSkip((p) => Math.max(p - take)),
+      take,
+      canPrev: skip > 0,
+      canNext: true,
+    }),
+    [skip, setSkip, take],
+  );
+}
+
+export function Pagination(props: ReturnType<typeof usePagination>) {
+  return (
+    <div className="flex select-none items-center justify-end space-x-2 py-4">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => props.prev()}
+        disabled={!props.canPrev}
+      >
+        Previous
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => props.next()}
+        disabled={!props.canNext}
+      >
+        Next
+      </Button>
+    </div>
+  );
+}