code changes

app/@header/default.js

@@ -2,14 +2,15 @@
 
 import Header from "@components/base/header";
 import { useThemeContext } from "app/theme-context";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
-export default function PageHeader({ searchParams }) {
+export default function PageHeader() {
   const { theme, toggleTheme } = useThemeContext();
   const router = useRouter();
 
   const currentPage = 1; // Assuming currentPage is constant for now
-  const search = searchParams.search;
+  const searchParams = useSearchParams();
+  const search = searchParams.get("search") || "";
 
   const handleSearch = (value) => {
     const query = value
@@ -29,7 +30,7 @@ export default function PageHeader({ searchParams }) {
       onThemeChange={toggleTheme}
       onSearch={handleSearch}
       onClear={handleClear}
-      value={search}
+      searchValue={search}
     />
   );
 }

components/base/header/index.js

@@ -10,7 +10,7 @@ function Header({
   onSearch,
   onClear,
   onThemeChange,
-  value,
+  searchValue,
 }) {
   const handleTheme = () => {
     onThemeChange(currentTheme);
@@ -35,7 +35,7 @@ function Header({
             <Search
               onSearch={handleSearch}
               onClear={handleClear}
-              value={value}
+              defaultValue={searchValue}
             />
           </div>
 

components/base/search/index.js

@@ -3,12 +3,13 @@ import PropTypes from "prop-types";
 import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 
-const Search = ({ onSearch, onClear, value }) => {
-  const [inputValue, setInputValue] = useState(value);
+const Search = ({ onSearch, onClear, defaultValue }) => {
+  const [inputValue, setInputValue] = useState(defaultValue);
 
   useEffect(() => {
-    setInputValue(value);
-  }, [value]);
+    setInputValue(defaultValue);
+  }, [defaultValue]);
+
   const handleCustomClear = () => {
     onClear("");
     setInputValue(""); // Reset the input value
@@ -32,8 +33,7 @@ const Search = ({ onSearch, onClear, value }) => {
       <input
         className={styles["search-input"]}
         type="text"
-        autoFocus={true}
-        value={inputValue}
+        value={inputValue || ""} // Ensure value is not null
         onChange={handleChange}
         onKeyUp={handleKeyPress}
         placeholder="Discover news, articles and more"