fixed some bugs
This commit is contained in:
@jcarymuhammedow
@@ -87,30 +87,38 @@ export default function SearchBar({
|
||||
if (!showResults || !data?.data) return null;
|
||||
|
||||
return (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white border rounded-xl shadow-lg max-h-[400px] overflow-y-auto z-50">
|
||||
{data.data.map((product) => (
|
||||
<button
|
||||
key={product.id}
|
||||
onClick={() => handleProductClick(product.id)}
|
||||
className="w-full cursor-pointer flex items-center gap-3 p-3 hover:bg-gray-50 transition-colors border-b last:border-b-0"
|
||||
>
|
||||
<div className="relative w-16 h-16 shrink-0">
|
||||
<Image
|
||||
src={product.thumbnail}
|
||||
alt={product.name}
|
||||
fill
|
||||
className="object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className="font-medium text-sm line-clamp-2">{product.name}</p>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{product.price_amount} TMT
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">{product.brand.name}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-2xl max-h-[500px] overflow-y-auto z-50 animate-slide-up">
|
||||
<div className="p-2">
|
||||
{data.data.map((product, index) => (
|
||||
<button
|
||||
key={product.id}
|
||||
onClick={() => handleProductClick(product.id)}
|
||||
className={`w-full cursor-pointer flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-all duration-200 group ${
|
||||
index !== data.data.length - 1 ? "border-b border-gray-100" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-20 h-20 shrink-0 rounded-lg overflow-hidden bg-gray-50 border border-gray-100">
|
||||
<Image
|
||||
src={product.thumbnail}
|
||||
alt={product.name}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 text-left min-w-0">
|
||||
<p className="font-semibold text-sm line-clamp-2 text-gray-900 group-hover:text-gray-700 transition-colors mb-1">
|
||||
{product.name}
|
||||
</p>
|
||||
<p className="text-base font-bold text-gray-900 mb-1">
|
||||
{product.price_amount} TMT
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 font-medium">
|
||||
{product.brand.name}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -118,22 +126,27 @@ export default function SearchBar({
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="top-4 translate-y-0">
|
||||
<DialogContent className="top-4 translate-y-0 rounded-lg border-gray-200">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{searchPlaceholder}</DialogTitle>
|
||||
<DialogTitle className="text-xl font-bold">
|
||||
{searchPlaceholder}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="relative" ref={searchRef}>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={searchPlaceholder}
|
||||
value={searchValue}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="h-10 rounded-xl focus:border-[#005bff] focus-visible:border-[#005bff] focus-visible:ring-0 active:border-[#005bff]"
|
||||
autoFocus
|
||||
/>
|
||||
{isLoading && (
|
||||
<Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
|
||||
)}
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={searchPlaceholder}
|
||||
value={searchValue}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="h-12 rounded-lg pl-12 pr-10 border-gray-200 focus:border-gray-900 focus-visible:border-gray-900 focus-visible:ring-0 transition-colors"
|
||||
autoFocus
|
||||
/>
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
{isLoading && (
|
||||
<Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 animate-spin text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<SearchResults />
|
||||
</div>
|
||||
</DialogContent>
|
||||
@@ -142,26 +155,32 @@ export default function SearchBar({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`bg-[#005bff] rounded-xl flex items-center relative ${className}`} ref={searchRef}>
|
||||
<div
|
||||
className={`bg-gray-900 rounded-lg flex items-center relative shadow-sm hover:shadow-md transition-shadow duration-200 ${className}`}
|
||||
ref={searchRef}
|
||||
>
|
||||
<div className="w-full relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={searchPlaceholder}
|
||||
value={searchValue}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="border-[#005bff] w-full rounded-xl border-2 focus-visible:ring-0 bg-white px-2"
|
||||
/>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={searchPlaceholder}
|
||||
value={searchValue}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="border w-full rounded-lg h-11 border-gray-900 bg-white pl-12 pr-4 focus-visible:ring-2 focus-visible:ring-gray-300 transition-all"
|
||||
/>
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
|
||||
</div>
|
||||
{isLoading && (
|
||||
<Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
|
||||
<Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 animate-spin text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
className="h-auto hover:bg-[#005bff] cursor-pointer bg-transparent flex items-center mr-1.5 text-white"
|
||||
className="h-11 w-11 hover:bg-gray-800 cursor-pointer bg-transparent flex items-center mr-1 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<SearchIcon />
|
||||
</Button>
|
||||
<SearchResults />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user