31 lines
981 B
TypeScript
31 lines
981 B
TypeScript
import { useState } from "preact/hooks";
|
|
|
|
export interface SearchBarProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
export function SearchBar(props: SearchBarProps) {
|
|
const { value, onChange, onSubmit } = props;
|
|
|
|
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={value}
|
|
onInput={e=>{
|
|
if(e.currentTarget){
|
|
onChange(e.currentTarget.value);
|
|
}
|
|
}}
|
|
onKeyUp={e=>{
|
|
if(e.key === "Enter"){
|
|
onSubmit();
|
|
}
|
|
}}/>
|
|
<button class="flex-grow-0 p-2 ml-2 text-white bg-blue-500 rounded hover:bg-blue-600"
|
|
type="submit" onClick={onSubmit}>Submit</button>
|
|
</div>
|
|
);
|
|
} |