43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { PageSizeSelect } from "@/components/PageSizeSelect";
|
|
import { type PageSize } from "@/lib/pagination";
|
|
|
|
export function ListToolbar({
|
|
query,
|
|
onQueryChange,
|
|
placeholder,
|
|
pageSize,
|
|
onPageSizeChange,
|
|
}: {
|
|
query: string;
|
|
onQueryChange: (value: string) => void;
|
|
placeholder: string;
|
|
pageSize: PageSize;
|
|
onPageSizeChange: (next: PageSize) => void;
|
|
}) {
|
|
return (
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<div className="flex max-w-md flex-1 gap-2">
|
|
<input
|
|
type="search"
|
|
value={query}
|
|
onChange={(event) => onQueryChange(event.target.value)}
|
|
placeholder={placeholder}
|
|
className="min-w-0 flex-1 border border-neutral-800 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-100 outline-none focus:border-neutral-500"
|
|
/>
|
|
{query ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onQueryChange("")}
|
|
className="border border-neutral-900 px-3 py-1.5 text-sm text-neutral-500 hover:text-neutral-300"
|
|
>
|
|
clear
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
<PageSizeSelect value={pageSize} onChange={onPageSizeChange} />
|
|
</div>
|
|
);
|
|
}
|