danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add is loading + not found

Browse Source
This commit is contained in:
hamid zarghami
2026-02-07 16:59:18 +03:30
parent 433bd65cb0
commit aae0706e03
1 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Search.tsx
+24 -13
View File
@@ -7,20 +7,21 @@ import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages' import { Pages } from '../../config/Pages'
import { useOutsideClick } from '../../hooks/useOutSideClick' import { useOutsideClick } from '../../hooks/useOutSideClick'
import { clx } from '../../helpers/utils' import { clx } from '../../helpers/utils'
import MoonLoader from 'react-spinners/MoonLoader'
const Search: FC = () => { const Search: FC = () => {
const { t } = useTranslation('global') const { t } = useTranslation('global')
const [search, setSearch] = useState<string>('') const [search, setSearch] = useState<string>('')
const [showSearch, setShowSearch] = useState<boolean>(false) const [showSearch, setShowSearch] = useState<boolean>(false)
const { data } = useGetServiceSearch(search) const { data, isPending } = useGetServiceSearch(search)
const ref = useOutsideClick(() => { const ref = useOutsideClick(() => {
setShowSearch(false) setShowSearch(false)
}) })
useEffect(() => { useEffect(() => {
if (data?.data && data?.data?.services?.length) { if (search.length) {
setShowSearch(true) setShowSearch(true)
} else { } else {
setShowSearch(false) setShowSearch(false)
@@ -41,17 +42,27 @@ const Search: FC = () => {
showSearch && showSearch &&
<div ref={ref} className='absolute shadow bg-white top-[100%] rounded-xl right-0 w-[270px] p-4 flex flex-col gap-4 overflow-y-auto max-h-screen'> <div ref={ref} className='absolute shadow bg-white top-[100%] rounded-xl right-0 w-[270px] p-4 flex flex-col gap-4 overflow-y-auto max-h-screen'>
{ {
data?.data?.services?.map((item: ServiceType, index: number) => { isPending ?
return ( <div className='flex justify-center'>
<Link onClick={() => setShowSearch(false)} to={Pages.services.detail + item.slug} key={item.id} className={clx( <MoonLoader color='black' size={20} />
'flex gap-3 items-center border-b pb-4', </div>
data?.data?.services?.length === index + 1 && 'border-b-0 pb-0' :
)}> data?.data?.services?.length === 0 ?
<img src={item.icon} className='size-8 rounded-lg' /> <div className='flex justify-center text-sm text-gray-400'>
<div className='text-[13px]'>{item.name}</div> نتیجه ای یافت نشد.
</Link> </div>
) :
}) data?.data?.services?.map((item: ServiceType, index: number) => {
return (
<Link onClick={() => setShowSearch(false)} to={Pages.services.detail + item.slug} key={item.id} className={clx(
'flex gap-3 items-center border-b pb-4',
data?.data?.services?.length === index + 1 && 'border-b-0 pb-0'
)}>
<img src={item.icon} className='size-8 rounded-lg' />
<div className='text-[13px]'>{item.name}</div>
</Link>
)
})
} }
</div> </div>
} }