Fixed bug #3

my-next-app/src/components/Header/Header.jsx

@@ -1,7 +1,7 @@
 'use client';
 import styles from './Header.module.css'; // Import CSS Modules
 import { useState } from 'react';
-import SearchBar from './searchBar.jsx';
+import SearchBar from './SearchBar.jsx';
 
 export default function Header() {
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -17,7 +17,7 @@ export default function Header() {
   return (
     <header className={`${styles.header} ${isSearchActive ? styles.searchActiveHeader : ''}`}>
       <h1 className={`${styles.title} ${isSearchActive ? styles.hidden : ''}`}>
-        :film_projector:Reel Magic:film_projector:
+        📽Reel Magic📽
       </h1>
       <button
         aria-label="Search"

my-next-app/src/components/Header/SearchBar.jsx

@@ -0,0 +1,54 @@
+// my-next-app/src/components/SearchBar.jsx
+'use client'
+import styles from "./SearchBar.module.css";
+import { useState, useEffect, useRef } from 'react';
+
+export default function SearchBar({ onClose }) {
+  const [query, setQuery] = useState("");
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, []);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert(`Searching for: ${query}`);
+    // Implement actual search logic here
+    onClose();
+  };
+
+  return (
+    <form className={styles.searchBar} onSubmit={handleSubmit}>
+      <input 
+        type="text" 
+        value={query} 
+        onChange={(e) => setQuery(e.target.value)} 
+        placeholder="Search..." 
+        className={styles.input}
+        ref={inputRef}
+      />
+      <button 
+        type="button" 
+        className={styles.closeButton} 
+        onClick={onClose}
+        aria-label="Close search"
+      >
+      <svg xmlns="http://www.w3.org/2000/svg" 
+      height="24px" 
+      viewBox="0 -960 960 960" 
+      width="24px" 
+      fill="#ff6d00">
+      <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
+      </svg>
+      </button>
+      <button 
+        type="submit" 
+        className={styles.submitButton}
+        aria-label="Submit search"
+      >
+        {/* icon removed */}
+      </button>
+    </form>
+  );
+}