eolas-app/src/components/SearchInput.tsx

import { Field } from "./ui/field"
import { Input } from "./ui/input"
import { Kbd } from "./ui/kbd"

export default function SearchInput({ form, inputRef }) {
   return (
      <>
         <form className="w-full">
            <form.Field
               name="search"
               children={(field) => {
                  return (
                     <Field>
                        <div className="relative">
                           <Input
                              ref={inputRef}
                              className="rounded-none [&::-webkit-search-cancel-button]:hidden"
                              id={field.name}
                              name={field.name}
                              value={field.state.value}
                              onChange={(e) => field.handleChange(e.target.value)}
                              onKeyDown={(e) => {
                                 if (e.key === "Enter") {
                                    e.preventDefault()
                                    form.handleSubmit()
                                 }
                              }}
                              type="search"
                              placeholder="Search"
                           />
                           <div className="absolute right-5 top-1 pointer-events-none">
                              {field.state.value ? <Kbd>Enter</Kbd> : <Kbd>Ctrl + K</Kbd>}
                           </div>
                        </div>
                     </Field>
                  )
               }}
            />
         </form>
      </>
   )
}