search

2025-10-29 13:36:58 +03:30
parent 959d8da608
commit f508984338
6 changed files with 309 additions and 45 deletions
@@ -0,0 +1,109 @@
+'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
+