Add search and filter functionality

Author: lovable-dev[bot]

src/components/layout/Navbar.tsx

@@ -4,10 +4,12 @@ import { Link, useLocation } from "react-router-dom";
 import { ShoppingCart, Menu, X, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useCart } from "@/context/CartContext";
+import { SearchDialog } from "@/components/ui/SearchDialog";
 
 const Navbar = () => {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const { toggleCart, totalItems } = useCart();
   const location = useLocation();
 
@@ -72,7 +74,12 @@ const Navbar = () => {
 
         {/* Right Side - Search & Cart */}
         <div className="flex items-center space-x-4 relative z-10">
-          <Button variant="ghost" size="icon" className="rounded-full">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="rounded-full"
+            onClick={() => setIsSearchOpen(true)}
+          >
             <Search className="h-5 w-5" />
           </Button>
 
@@ -140,6 +147,8 @@ const Navbar = () => {
           </div>
         </div>
       </div>
+      
+      <SearchDialog open={isSearchOpen} onOpenChange={setIsSearchOpen} />
     </header>
   );
 };

src/components/ui/SearchDialog.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Search, X } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { products } from "@/lib/products";
+
+interface SearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const SearchDialog = ({ open, onOpenChange }: SearchDialogProps) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const navigate = useNavigate();
+
+  const filteredProducts = products.filter(
+    (product) =>
+      product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      product.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      product.category.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleProductClick = (productId: string) => {
+    navigate(`/product/${productId}`);
+    onOpenChange(false);
+    setSearchQuery("");
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-2xl max-h-[80vh] p-0">
+        <DialogHeader className="p-6 pb-0">
+          <DialogTitle className="sr-only">Buscar productos</DialogTitle>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+            <Input
+              placeholder="Buscar productos..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10 pr-10 h-12 text-base"
+              autoFocus
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery("")}
+                className="absolute right-3 top-1/2 -translate-y-1/2"
+              >
+                <X className="h-4 w-4 text-muted-foreground hover:text-foreground" />
+              </button>
+            )}
+          </div>
+        </DialogHeader>
+
+        <div className="overflow-y-auto max-h-[calc(80vh-120px)] px-6 pb-6">
+          {searchQuery && (
+            <div className="mt-4">
+              {filteredProducts.length > 0 ? (
+                <div className="space-y-2">
+                  {filteredProducts.map((product) => (
+                    <button
+                      key={product.id}
+                      onClick={() => handleProductClick(product.id)}
+                      className="w-full flex items-center gap-4 p-3 rounded-lg hover:bg-accent transition-colors text-left"
+                    >
+                      <img
+                        src={product.image}
+                        alt={product.name}
+                        className="w-16 h-16 object-cover rounded"
+                      />
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-medium text-sm truncate">
+                          {product.name}
+                        </h3>
+                        <p className="text-sm text-muted-foreground truncate">
+                          {product.description}
+                        </p>
+                        <p className="text-sm font-medium mt-1">
+                          ${product.price.toFixed(2)}
+                        </p>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  No se encontraron productos
+                </div>
+              )}
+            </div>
+          )}
+          
+          {!searchQuery && (
+            <div className="text-center py-8 text-muted-foreground">
+              Escribe para buscar productos
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};