24 lines
1.0 KiB
TypeScript
24 lines
1.0 KiB
TypeScript
interface SearchInputProps {
|
|
placeholder: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export default function SearchInput({ placeholder, value, onChange }: SearchInputProps) {
|
|
return (
|
|
<div className="relative max-w-xs">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5 text-[var(--text-secondary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
className="block w-full pl-10 pr-3 py-2 border border-[var(--card-border)] rounded-md leading-5 bg-[var(--card-bg)] text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--accent)] focus:border-[var(--accent)] sm:text-sm"
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|