sarlink-portal/components/search.tsx

"use client";

import { Input } from "@/components/ui/input";
import { Loader2 } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useRef, useTransition } from "react";
import { Button } from "./ui/button";

export default function Search({ disabled }: { disabled?: boolean }) {
	const inputRef = useRef<HTMLInputElement>(null);
	const { replace } = useRouter();

	const pathname = usePathname();
	const [isPending, startTransition] = useTransition();
	const searchParams = useSearchParams();
	const searchQuery = searchParams.get("query");

	function handleSearch(term: string) {
		const params = new URLSearchParams(searchParams.toString());

		if (term) {
			params.set("query", term);
			params.set("page", "1");
		} else {
			params.delete("query");
		}

		startTransition(() => {
			replace(`${pathname}?${params.toString()}`);
		});
	}

	return (
		<div className="flex w-full gap-2 items-center justify-between">
			<Input
				ref={inputRef}
				placeholder="Search..."
				type="text"
				className="w-fit"
				name="search"
				id="search"
				defaultValue={searchQuery ? searchQuery : ""}
				disabled={disabled}
				spellCheck={false}
				onChange={(e) => handleSearch(e.target.value)}
			/>
			<Button
				disabled={isPending}
				onClick={() => {
					if (inputRef.current) {
						inputRef.current.value = "";
					}
					replace(pathname);
				}}
			>
				{isPending ? <Loader2 className="animate-spin" /> : "Reset"}
			</Button>
		</div>
	);
}