sarlink-portal/components/search.tsx

"use client";

import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useRef, useTransition } from "react";

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 (
		<Input
			ref={inputRef}
			placeholder="Search..."
			type="search"
			className={cn("w-fit", isPending && "animate-pulse")}
			name="search"
			id="search"
			defaultValue={searchQuery ? searchQuery : ""}
			disabled={disabled}
			spellCheck={false}
			onChange={(e) => handleSearch(e.target.value)}
		/>
	);
}