feat: split settings management pages

modules/settings/components/TableToolbar.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { buildPageHref } from "@/modules/settings/lib/pagination";
+
+type TableToolbarProps = {
+  actionLabel?: string;
+  page: number;
+  pageCount: number;
+  pathname: string;
+  query: string;
+  searchPlaceholder: string;
+  total: number;
+};
+
+export function TableToolbar({
+  actionLabel,
+  page,
+  pageCount,
+  pathname,
+  query,
+  searchPlaceholder,
+  total,
+}: TableToolbarProps): React.ReactElement {
+  return (
+    <div className="flex flex-col gap-3 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
+      <form className="flex w-full max-w-xl gap-2" action={pathname}>
+        <Input name="q" placeholder={searchPlaceholder} defaultValue={query} />
+        <Button type="submit" variant="outline">
+          搜索
+        </Button>
+      </form>
+      <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
+        <span>{actionLabel ?? `共 ${total} 条`}</span>
+        <div className="flex items-center gap-2">
+          {page <= 1 ? (
+            <Button disabled size="sm" variant="outline">
+              上一页
+            </Button>
+          ) : (
+            <Button asChild size="sm" variant="outline">
+              <Link href={buildPageHref(pathname, query, page - 1)}>上一页</Link>
+            </Button>
+          )}
+          <span className="min-w-16 text-center">
+            {page}/{pageCount}
+          </span>
+          {page >= pageCount ? (
+            <Button disabled size="sm" variant="outline">
+              下一页
+            </Button>
+          ) : (
+            <Button asChild size="sm" variant="outline">
+              <Link href={buildPageHref(pathname, query, page + 1)}>下一页</Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}