64 lines
3.2 KiB
TypeScript
64 lines
3.2 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 (
|
|
<div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm p-4 mb-6">
|
|
<form onSubmit={handleSubmit}>
|
|
<label htmlFor="user-search" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
جستجوی کاربر
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<div className="flex-1 relative">
|
|
<div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
|
|
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400 dark:text-gray-500" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="user-search"
|
|
className="block w-full pr-11 pl-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:bg-white dark:focus:bg-gray-800 sm:text-sm transition-all duration-150"
|
|
placeholder="ایمیل یا شماره موبایل کاربر را وارد کنید..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
dir="rtl"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || !searchTerm.trim()}
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 shadow-sm shadow-indigo-500/20 whitespace-nowrap"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
در حال جستجو
|
|
</>
|
|
) : (
|
|
<>
|
|
<MagnifyingGlassIcon className="h-4 w-4" />
|
|
جستجو
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|