ARAMA ÇUBUĞU

```javascriptreact
"use client";
import React from "react";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
function SearchBar() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  const handleSearch = (term) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", "1");
    if (term) {
      params.set("query", term);
    } else {
      params.delete("query");
    }
    replace(`${pathname}?${params.toString()}`);
  };
  return (
    <div>
      <input
        type="text"
        name="query"
        onChange={(e) => handleSearch(e.target.value)}
        className="shadow appearance-none border rounded-xl text-lg md:text-xl w-40 md:w-96 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        placeholder="Search products..."
        defaultValue={searchParams.get("query")?.toString()}
      />
    </div>
  );
}

export default SearchBar;

```

Last updated