| import { useTranslation } from "react-i18next"; | |
| import { I18nKey } from "#/i18n/declaration"; | |
| import { cn } from "#/utils/utils"; | |
| import SearchIcon from "#/icons/search.svg?react"; | |
| interface SearchInputProps { | |
| value: string; | |
| onChange: (value: string) => void; | |
| className?: string; | |
| } | |
| export function SearchInput({ value, onChange, className }: SearchInputProps) { | |
| const { t } = useTranslation("openhands"); | |
| return ( | |
| <div | |
| className={cn( | |
| "relative flex min-w-0 flex-1 items-center", | |
| "h-9 rounded-lg border border-[var(--oh-border)] bg-base-secondary", | |
| "focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20", | |
| "transition-colors", | |
| className, | |
| )} | |
| > | |
| <SearchIcon | |
| className="ml-3 size-4 shrink-0 text-tertiary-alt" | |
| aria-hidden | |
| /> | |
| <input | |
| type="text" | |
| value={value} | |
| onChange={(e) => onChange(e.target.value)} | |
| placeholder={t(I18nKey.AUTOMATIONS$SEARCH_PLACEHOLDER)} | |
| aria-label={t(I18nKey.AUTOMATIONS$SEARCH_PLACEHOLDER)} | |
| className="min-w-0 flex-1 border-0 bg-transparent px-3 text-sm text-white outline-none placeholder:text-tertiary-alt" | |
| /> | |
| </div> | |
| ); | |
| } | |