File size: 1,229 Bytes
3201ca6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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>
);
}
|