53 lines
2.4 KiB
TypeScript
53 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface UserSearchProps {
|
|
onSearch: (searchTerm: string) => void;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (searchTerm.trim()) {
|
|
onSearch(searchTerm.trim());
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="mb-6">
|
|
<div className="flex gap-2">
|
|
<div className="flex-1">
|
|
<label htmlFor="search" className="sr-only">
|
|
جستجو با ایمیل یا شماره موبایل
|
|
</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
|
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="search"
|
|
className="block w-full pr-10 pl-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|
placeholder="جستجو با ایمیل یا شماره موبایل..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
dir="rtl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || !searchTerm.trim()}
|
|
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isLoading ? 'در حال جستجو...' : 'جستجو'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
} |