61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { Button, LinkButton } 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>
|
|
) : (
|
|
<LinkButton href={buildPageHref(pathname, query, page - 1)} size="sm" variant="outline">
|
|
上一页
|
|
</LinkButton>
|
|
)}
|
|
<span className="min-w-16 text-center">
|
|
{page}/{pageCount}
|
|
</span>
|
|
{page >= pageCount ? (
|
|
<Button disabled size="sm" variant="outline">
|
|
下一页
|
|
</Button>
|
|
) : (
|
|
<LinkButton href={buildPageHref(pathname, query, page + 1)} size="sm" variant="outline">
|
|
下一页
|
|
</LinkButton>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|