Move to next/form (#1369)

components/layout/navbar/search.tsx

@@ -1,35 +1,18 @@
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { createUrl } from 'lib/utils';
-import { useRouter, useSearchParams } from 'next/navigation';
+import Form from 'next/form';
+import { useSearchParams } from 'next/navigation';
 
 export default function Search() {
-  const router = useRouter();
   const searchParams = useSearchParams();
 
-  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const val = e.target as HTMLFormElement;
-    const search = val.search as HTMLInputElement;
-    const newParams = new URLSearchParams(searchParams.toString());
-
-    if (search.value) {
-      newParams.set('q', search.value);
-    } else {
-      newParams.delete('q');
-    }
-
-    router.push(createUrl('/search', newParams));
-  }
-
   return (
-    <form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+    <Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
       <input
         key={searchParams?.get('q')}
         type="text"
-        name="search"
+        name="q"
         placeholder="Search for products..."
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
@@ -38,7 +21,7 @@ export default function Search() {
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
         <MagnifyingGlassIcon className="h-4" />
       </div>
-    </form>
+    </Form>
   );
 }