git init

app/ui/search.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
+import {usePathname, useRouter, useSearchParams} from "next/navigation";
+import {useDebouncedCallback} from "use-debounce";
+
+export default function Search({placeholder}: { placeholder: string }) {
+
+    const pathname = usePathname();
+    const { replace } = useRouter();
+    const searchParams = useSearchParams();
+
+    const handleSearch = useDebouncedCallback((term) => {
+        console.log(`searching for ${term}`)
+
+        const params = new URLSearchParams(searchParams);
+        params.set('page', '1');
+
+        if (term) {
+            params.set('query', term);
+        } else {
+            params.delete('query');
+        }
+
+        replace(`${pathname}?${params.toString()}`); // params.toString() translates this input into a URL-friendly format
+    }, 500);
+
+    return (
+        <div className="relative flex flex-1 flex-shrink-0">
+            <label htmlFor="search" className="sr-only">
+                Search
+            </label>
+            <input
+                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                placeholder={placeholder}
+                onChange={(e) => handleSearch(e.target.value)}
+                defaultValue={searchParams.get('query')?.toString()}
+            />
+            <MagnifyingGlassIcon
+                className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900"/>
+        </div>
+    );
+}