27 lines
918 B
TypeScript
27 lines
918 B
TypeScript
|
import { useState } from "preact/hooks";
|
||
|
|
|
||
|
|
export interface SearchBarProps {
|
||
|
|
value: string;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SearchBar(props: SearchBarProps) {
|
||
|
|
const { value, onChange } = props;
|
||
|
|
const [inputValue, setInputValue] = useState(value);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div class="flex items-center justify-center w-full p-4">
|
||
|
|
<input class="w-full flex-auto p-2 border border-gray-200 rounded
|
||
|
|
focus:outline-none focus:border-gray-600"
|
||
|
|
type="text" placeholder="Search..." value={inputValue}
|
||
|
|
onInput={e=>{
|
||
|
|
if(e.currentTarget){
|
||
|
|
setInputValue(e.currentTarget.value);
|
||
|
|
onChange(e.currentTarget.value);
|
||
|
|
}
|
||
|
|
}}/>
|
||
|
|
<button class="flex-grow-0 p-2 ml-2 text-white bg-blue-500 rounded hover:bg-blue-600"
|
||
|
|
type="submit">Submit</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|