hamid zarghami
110 lines
4.5 KiB
TypeScript
110 lines
4.5 KiB
TypeScript
'use client'
|
||
import Input from '@/components/Input'
|
||
import { SearchNormal1 } from 'iconsax-react'
|
||
import { FC, useState } from 'react'
|
||
import { useProductSearch } from '@/app/products/hooks/useProductsData'
|
||
import { useRouter } from 'next/navigation'
|
||
import Image from 'next/image'
|
||
|
||
const MobileSearch: FC = () => {
|
||
const [isSearchOpen, setIsSearchOpen] = useState(false)
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const router = useRouter()
|
||
|
||
const { data: searchResults, isLoading } = useProductSearch(searchQuery)
|
||
|
||
const handleSearch = (value: string) => {
|
||
setSearchQuery(value)
|
||
}
|
||
|
||
const handleClose = () => {
|
||
setIsSearchOpen(false)
|
||
setSearchQuery('')
|
||
}
|
||
|
||
const handleProductClick = (url: string) => {
|
||
router.push(url)
|
||
handleClose()
|
||
}
|
||
|
||
if (isSearchOpen) {
|
||
return (
|
||
<div className='fixed inset-0 bg-white z-50 flex flex-col'>
|
||
<div className='flex items-center gap-2 px-4 py-4 border-b border-gray-200'>
|
||
<Input
|
||
className='w-full'
|
||
variant='search'
|
||
placeholder='جستجو'
|
||
autoFocus
|
||
value={searchQuery}
|
||
onChange={(e) => handleSearch(e.target.value)}
|
||
/>
|
||
<button
|
||
onClick={handleClose}
|
||
className='text-sm text-gray-600 whitespace-nowrap px-2'
|
||
>
|
||
لغو
|
||
</button>
|
||
</div>
|
||
|
||
<div className='flex-1 overflow-y-auto'>
|
||
{searchQuery.length > 0 && (
|
||
<>
|
||
{isLoading ? (
|
||
<div className='p-4 text-center text-gray-500'>
|
||
در حال جستجو...
|
||
</div>
|
||
) : searchResults?.results?.products?.length ? (
|
||
<div className='py-2'>
|
||
{searchResults.results.products.map((product) => (
|
||
<div
|
||
key={product._id}
|
||
onClick={() => handleProductClick(product.url)}
|
||
className='flex items-center gap-3 px-4 py-3 border-b border-gray-100 active:bg-gray-50'
|
||
>
|
||
<div className='w-[60px] h-[60px] flex-shrink-0'>
|
||
<Image
|
||
src={product.imagesUrl.cover}
|
||
alt={product.title_fa}
|
||
width={60}
|
||
height={60}
|
||
className='rounded-lg object-cover w-full h-full'
|
||
unoptimized
|
||
/>
|
||
</div>
|
||
<div className='flex-1 min-w-0'>
|
||
<h3 className='text-sm font-medium text-gray-900 line-clamp-2'>
|
||
{product.title_fa}
|
||
</h3>
|
||
<p className='text-xs text-gray-500 truncate mt-1'>
|
||
{product.model}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className='p-4 text-center text-gray-500'>
|
||
محصولی یافت نشد
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<button
|
||
onClick={() => setIsSearchOpen(true)}
|
||
className='p-2 rounded-lg hover:bg-gray-50'
|
||
>
|
||
<SearchNormal1 size={24} color='#8C90A3' />
|
||
</button>
|
||
)
|
||
}
|
||
|
||
export default MobileSearch
|
||
|