Agent Zero
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
/**
|
|
* Mail search bar — input for full-text mail search.
|
|
*/
|
|
|
|
import React, { useState, useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Search } from 'lucide-react';
|
|
|
|
export interface MailSearchBarProps {
|
|
onSearch: (query: string) => void;
|
|
value?: string;
|
|
}
|
|
|
|
export function MailSearchBar({ onSearch }: MailSearchBarProps) {
|
|
const { t } = useTranslation();
|
|
const [query, setQuery] = useState('');
|
|
|
|
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setQuery(e.target.value);
|
|
}, []);
|
|
|
|
const handleSubmit = useCallback((e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSearch(query.trim());
|
|
}, [query, onSearch]);
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="relative" data-testid="mail-search-bar">
|
|
<Input
|
|
type="search"
|
|
value={query}
|
|
onChange={handleChange}
|
|
placeholder={t('mail.searchPlaceholder')}
|
|
aria-label={t('common.search')}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch"
|
|
aria-label={t('common.search')}
|
|
>
|
|
<Search className="w-4 h-4 text-secondary-400" aria-hidden="true" strokeWidth={2} />
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|