Files
road-monitoring-ui/src/components/data-table/TableSearchInput.tsx

44 lines
917 B
TypeScript

'use client';
import { Search } from 'lucide-react';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@/components/ui/input-group';
import { cn } from '@/lib/utils';
interface TableSearchInputProps {
value: string;
onChange: (value: string) => void;
placeholder?: string;
className?: string;
}
export function TableSearchInput({
value,
onChange,
placeholder = 'Search...',
className,
}: TableSearchInputProps) {
return (
<InputGroup
className={cn(
'h-9 border-border bg-background shadow-none md:max-w-xs',
className,
)}
>
<InputGroupAddon>
<Search className="size-4" />
</InputGroupAddon>
<InputGroupInput
value={value}
onChange={(event) => onChange(event.target.value)}
placeholder={placeholder}
className="placeholder:text-muted-foreground/70"
/>
</InputGroup>
);
}