25 lines
993 B
TypeScript
Executable File
25 lines
993 B
TypeScript
Executable File
import { Search, Loader2 } from "lucide-react";
|
|
|
|
interface SearchInputProps {
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
value?: string;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function SearchInput({ onChange, placeholder, value, isLoading }: Readonly<SearchInputProps>) {
|
|
return (
|
|
<div className="relative text-zinc-600 text-sm">
|
|
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-sm">
|
|
<Search size={16} className="text-muted-foreground" />
|
|
</div>
|
|
<input type="text" className="pl-10 py-2.5 px-3 border border-gray-300 rounded-lg w-full " placeholder={placeholder ?? "Search..."} onChange={(e) => onChange(e.target.value)} value={value} aria-busy={isLoading ? true : undefined} />
|
|
{isLoading && (
|
|
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
|
<Loader2 size={16} className="animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|