add search icon to search box

This commit is contained in:
sk1982 2024-03-15 19:02:27 -04:00
parent 5043c8dda3
commit cd59c24e4c

View File

@ -7,6 +7,7 @@ import { XMarkIcon } from '@heroicons/react/16/solid';
import { ArrowLongUpIcon } from '@heroicons/react/24/solid'; import { ArrowLongUpIcon } from '@heroicons/react/24/solid';
import { useDebounceCallback, useIsMounted } from 'usehooks-ts'; import { useDebounceCallback, useIsMounted } from 'usehooks-ts';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import { SearchIcon } from '@nextui-org/shared-icons';
type ValueType = { type ValueType = {
@ -269,7 +270,7 @@ const FilterSorterComponent = <D, M extends string, N extends string, S extends
setFilterState(defaultFilterState); setFilterState(defaultFilterState);
setQuery(''); setQuery('');
}}>Reset</Button> }}>Reset</Button>
<Input ref={searchRef} size="sm" label="Search" type="text" isClearable={true} value={query} onValueChange={setQuery} onClear={() => setQuery('')} /> <Input startContent={<SearchIcon />} ref={searchRef} size="sm" label="Search" type="text" isClearable={true} value={query} onValueChange={setQuery} onClear={() => setQuery('')} />
</div> </div>
<div className="flex gap-2 sm:w-1/3 flex-grow sm:flex-grow-0 sm:max-w-80 items-center"> <div className="flex gap-2 sm:w-1/3 flex-grow sm:flex-grow-0 sm:max-w-80 items-center">
<Select name="page" label="Per Page" size="sm" className="w-1/2" selectedKeys={pageSize} onSelectionChange={sel => sel !== 'all' && sel.size && setPageSize(sel)}> <Select name="page" label="Per Page" size="sm" className="w-1/2" selectedKeys={pageSize} onSelectionChange={sel => sel !== 'all' && sel.size && setPageSize(sel)}>