Implemented Header.js

frontend/src/components/Header.js

-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>
     );
 }