40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { Search } from 'lucide-react'
|
|
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
interface DataTableToolbarProps {
|
|
searchPlaceholder?: string
|
|
searchValue?: string
|
|
onSearchChange?: (value: string) => void
|
|
children?: React.ReactNode
|
|
actions?: React.ReactNode
|
|
}
|
|
|
|
export const DataTableToolbar = ({
|
|
searchPlaceholder = 'Поиск…',
|
|
searchValue = '',
|
|
onSearchChange,
|
|
children,
|
|
actions,
|
|
}: DataTableToolbarProps) => (
|
|
<div className="flex flex-col gap-3 border-b bg-muted/20 p-4">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex flex-1 flex-wrap items-center gap-3">
|
|
{onSearchChange ? (
|
|
<div className="relative w-full min-w-[220px] max-w-sm">
|
|
<Search className="pointer-events-none absolute left-2.5 top-3.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
value={searchValue}
|
|
onChange={(event) => onSearchChange(event.target.value)}
|
|
placeholder={searchPlaceholder}
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
{children}
|
|
</div>
|
|
{actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
|
|
</div>
|
|
</div>
|
|
)
|