add search in products search

Author: Mishra-coder

frontend/src/App.jsx

@@ -20,6 +20,7 @@ function App() {
   const [sortOption, setSortOption] = useState('recommended');
   const [activeNav, setActiveNav] = useState('MEN');
   const [sneakersView, setSneakersView] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
   const [loggedInUser, setLoggedInUser] = useState(() => {
     try { return JSON.parse(localStorage.getItem('zappify_user')) || null; } catch { return null; }
   });
@@ -92,15 +93,19 @@ function App() {
       const sneakerMatch = sneakersView ? product.id >= 30 && product.id <= 44 : true;
       const categoryMatch = selectedCategories.length === 0 || selectedCategories.includes(product.category);
       const themeMatch = selectedThemes.length === 0 || selectedThemes.includes(product.theme);
-      return sneakerMatch && categoryMatch && themeMatch;
+      const searchMatch = searchQuery.trim() === '' || 
+        product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        product.brand.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        product.category.toLowerCase().includes(searchQuery.toLowerCase());
+      return sneakerMatch && categoryMatch && themeMatch && searchMatch;
     });
 
     if (sortOption === 'low-high') result = [...result].sort((a, b) => a.price - b.price);
     else if (sortOption === 'high-low') result = [...result].sort((a, b) => b.price - a.price);
     else if (sortOption === 'newest') result = [...result].sort((a, b) => b.id - a.id);
 
     return result;
-  }, [selectedCategories, selectedThemes, sortOption, sneakersView]);
+  }, [selectedCategories, selectedThemes, sortOption, sneakersView, searchQuery]);
 
   return (
     <div className="zappify-app">
@@ -113,6 +118,8 @@ function App() {
         loggedInUser={loggedInUser}
         onLogout={handleLogout}
         onOpenAccount={() => setShowAccount(true)}
+        searchQuery={searchQuery}
+        onSearch={setSearchQuery}
       />
 
       <main className="app-main">

frontend/src/components/Header.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Search, ShoppingCart, Heart, User, Menu, X } from 'lucide-react';
 
-const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav, loggedInUser, onLogout, onOpenAccount }) => {
+const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav, loggedInUser, onLogout, onOpenAccount, searchQuery, onSearch }) => {
   const [isSearchFocused, setIsSearchFocused] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [showUserMenu, setShowUserMenu] = useState(false);
@@ -46,9 +46,14 @@ const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav
             <input
               type="text"
               placeholder="What are you looking for?"
+              value={searchQuery}
+              onChange={(e) => onSearch(e.target.value)}
               onFocus={() => setIsSearchFocused(true)}
               onBlur={() => setIsSearchFocused(false)}
             />
+            {searchQuery && (
+              <button className="search-clear" onClick={() => onSearch('')}>✕</button>
+            )}
           </div>
 
           <div className="user-actions">

frontend/src/index.css

@@ -1188,3 +1188,7 @@ ul {
 .cancel-popup hr { border: none; border-top: 1px solid #eee; margin-bottom: 12px; }
 .cancel-popup-btn { float: right; background: none; border: 1.5px solid #e85d04; color: #e85d04; font-weight: 700; font-size: 14px; padding: 8px 20px; border-radius: 8px; cursor: pointer; }
 .order-status.cancelled { background: #fef2f2; color: #dc2626; }
+
+/* Search clear button */
+.search-clear { background: none; border: none; cursor: pointer; color: #aaa; font-size: 14px; padding: 0 4px; line-height: 1; }
+.search-clear:hover { color: #e85d04; }