diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index 28337c81679d0fc1471177b780d43466f55c343b..bc080fdd83a9cc660e2279dd5923458d3a0295fb 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -1,18 +1,65 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; +import React, { useEffect, useState } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import { useCart } from '../contexts/CartContext'; // Import useCart +import '../css/Header.css'; function Header() { + const { cart } = useCart(); // Access the cart context + const [searchTerm, setSearchTerm] = useState(''); + const [brands, setBrands] = useState([]); + const [selectedBrand, setSelectedBrand] = useState('All Brands'); + const navigate = useNavigate(); + + useEffect(() => { + fetch('http://localhost:5000/brand') + .then(response => response.json()) + .then(data => setBrands(data)) + .catch(console.error); + }, []); + + const handleSearchChange = (e) => { + setSearchTerm(e.target.value); + }; + + const handleSearchSubmit = (e) => { + e.preventDefault(); + navigate(`/search?query=${searchTerm}&brand=${selectedBrand}`); + }; + + const handleBrandChange = (e) => { + setSelectedBrand(e.target.value); + }; + + // Calculate total items in the cart + const totalItems = cart.items.reduce((total, item) => total + item.quantity, 0); + return ( <header> - <nav> - <ul> - <li><Link to="/">Home</Link></li> - <li><Link to="/products">Products</Link></li> - <li><Link to="/orders">Orders</Link></li> - </ul> - </nav> + <div className="logo"> + <Link to="/">ElectroMart</Link> + </div> + <form className="search-bar" onSubmit={handleSearchSubmit}> + <select value={selectedBrand} onChange={handleBrandChange} className="brand-select"> + <option value="All Brands">All Brands</option> + {brands.map(brand => ( + <option key={brand.BrandID} value={brand.Name}>{brand.Name}</option> + ))} + </select> + <input type="text" placeholder="Search ElectroMart" value={searchTerm} onChange={handleSearchChange} /> + <button type="submit"><i className="fa-solid fa-magnifying-glass"></i></button> + </form> + <div className="user-controls"> + <Link to="" className="signin-button"> + <i className="fa-solid fa-user"></i> + <span>Sign In</span> + </Link> + <Link to="/cart" className="cart-button"> + <i className="fa-solid fa-cart-shopping"></i> + <span>Cart{totalItems > 0 ? ": " + totalItems : ''}</span> + </Link> + </div> </header> ); } -export default Header; \ No newline at end of file +export default Header;