search_awesome/components/SearchBar.tsx

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>
    );
}