36 lines
978 B
TypeScript
36 lines
978 B
TypeScript
import React from 'react';
|
|
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
|
|
|
type Props = {
|
|
value: string;
|
|
onChange: (val: string) => void;
|
|
onSearch: () => void;
|
|
placeholder?: string;
|
|
};
|
|
|
|
const SearchBar: React.FC<Props> = ({ value, onChange, onSearch, placeholder }) => {
|
|
const handle = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSearch();
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handle} className="flex flex-1 gap-2 items-center min-w-[200px] max-w-full">
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={e => onChange(e.target.value)}
|
|
className="
|
|
w-full px-3 py-2 border border-gray-300 rounded-md
|
|
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
|
placeholder-gray-500 h-10
|
|
text-black font-medium bg-white
|
|
text-sm sm:text-base
|
|
"
|
|
placeholder={placeholder}
|
|
/>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default SearchBar;
|